javascript - How to keep z-index in canvas when updating images via select box -
i'm building poker table maker works follows:
- when page loads, load components of poker table one-by-one.
- final users select kind of felt, armrest, body or cup holders want on poker tables through select box.
- when change detected in select box, src attribute of image object changes well. example: if user wants black felt, i'm loading image: felts/black.png; if decides looks better in blue, page loads image felts/blue.png
my problem following:
as change 1 element of poker table, new image automatically loaded on top of rest .
for example: if change felt color, felt's image go on top of armrest's image.
i'd know how force felt image maintain z-index sort of thing.
here's code:
var tablebody = new image(); tablebody.onload = function() { context.drawimage(tablebody, 0, 0); }; tablebody.src = "http://www.mcptables.com/images/buildyourtable/body/autumn-oak.png"; /* , same thing other parts of poker table... tablearmrest, tablefelt tablecupholders, etc... */ $('#armrest').change( function() { switch( $(this).val() ) { case "black": tablearmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/black.png"; break; case "brown": tablearmrest.src = "http://www.mcptables.com/images/buildyourtable/armrest/wood.png"; } } )
you can see in action on following page:
http://mcptables.com/buildyourtable.html
and here's link js code:
http://mcptables.com/js/pokertablebuilder.js
any appreciated! if want change
unfortunately there no way maintain z-index of drawn objects on canvas. can delete , redraw appropriately.
there canvas frameworks take care of , give developer "impression" of separate objects on canvas. see processing.js, raphael, kineticjs etc