javascript - How to keep z-index in canvas when updating images via select box -


i'm building poker table maker works follows:

  1. when page loads, load components of poker table one-by-one.
  2. final users select kind of felt, armrest, body or cup holders want on poker tables through select box.
  3. 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


Popular posts from this blog

How to calculate SNR of signals in MATLAB? -

c# - Attempting to upload to FTP: System.Net.WebException: System error -

ios - UISlider customization: how to properly add shadow to custom knob image -