html5 - Issues with drawing images using multiple canvas's -

drawing working fine, until decided use multiple canvas's. have stage canvas, entity canvas, , object canvas. i'll end combining object , entity canvas's, though. anyway, can see below, hero class draws fine. tried make entity class same draw function, won't let me draw when call function. have same issue background canvas. don't have class background yet, will. try drawing image stage's context, , breaks code.

(i tried setting jsfiddle, wouldn't able images on there.)

update half of issue fixed marke. issue have, entitiesctx the context can draw images/rectangles. other ctx's can't draw anything. help, please! updated code.

var stage = document.getelementbyid('stage'); var ctxstage = stage.getcontext('2d'); var entitiesstage = document.getelementbyid('entities'); var ctxentities = entitiesstage.getcontext('2d'); var bg = document.getelementbyid('bg'); var ctxbg = bg.getcontext('2d'); var playerimg = new image(); playerimg.src = 'res/player_sprite_sheet.png'; var bgimg = new image(); bgimg.onload = function() {     ctxbg.drawimage(bgimg,0,0,80,50,-200,-90,1000,700); }; bgimg.src = 'res/background.png'; var consoleimg = new image(); consoleimg.onload = function() {     ctxentities.drawimage(consoleimg,0,0,80,50,20,20,1000,700); }; console.src = 'res/console.png';  var hero = new hero(); var prop;  var isplaying = false;  window.onload = init; var requestanimframe = window.requestanimationframe ||                         window.webkitrequestanimationframe ||                         window.mozrequestanimationframe ||                         window.orequestanimationframe ||                         window.msrequestanimationframe ||                         function(callback) {                             window.settimeout(callback, 1000 / 60);                         };  function init() {     console.debug('initializing...');      document.addeventlistener('keydown',keydown,false);     document.addeventlistener('keyup',keyup,false);      ctxstage.imagesmoothingenabled = false;     ctxstage.webkitimagesmoothingenabled = false;     ctxstage.mozimagesmoothingenabled = false;     ctxentities.imagesmoothingenabled = false;     ctxentities.webkitimagesmoothingenabled = false;     ctxentities.mozimagesmoothingenabled = false;      prop = new entity(consoleimg,20,20,80,50,0,0);      startloop(); }  function startloop(){     console.debug('starting loop...');     isplaying = true;     loop(); }  function stoploop(){     console.debug('stopping loop...');     isplaying = false; }  function loop(){     if(isplaying){         requestanimframe(loop);         draw();         update();     } }  function update(){     hero.update(); }  function clearctx(){     ctxentities.clearrect(0,0,stage.width,stage.height); }  function draw(){     clearctx();     ctxentities.fillstyle = 'black';     ctxentities.fillrect(0,0,stage.width,stage.height);     ctxentities.drawimage(bgimg,0,0,80,50,-200,-90,1000,700);     hero.draw();     prop.draw(); }   // hero class function hero() {     this.xpos = 140;     this.ypos = 320;     this.srcx = 0;     this.srcy = 0;     this.width = 10;     this.height = 20;     this.scalex = 50;     this.scaley = 80;     this.isupkey;     this.isdownkey;     this.isleftkey;     this.isrightkey;     this.img = playerimg;      this.speed = 2;     this.defspeed = 3.5;     this.dir = 'right'; }  hero.prototype.draw = function() {     ctxentities.drawimage(this.img,this.srcx,this.srcy,this.width,this.height,this.xpos,this.ypos,this.scalex,this.scaley); };  hero.prototype.update = function() {     this.checkkeys();      if(this.dir == 'right'){         if(this.scalex >= 0){             this.srcx = 0;         }         if(this.scalex >= 40){             this.scalex = 40;             this.speed = this.defspeed;         }else{             this.xpos -= 2.3;             this.speed = 0;             this.scalex += 5;         }     }else if(this.dir =='left'){         if(this.scalex <= 0){             this.srcx = 10;         }         if(this.scalex <= -40){             this.scalex = -40;             this.speed = this.defspeed;         }else{             this.xpos += 2.3;             this.speed = 0;             this.scalex -= 5;         }     } };  hero.prototype.checkkeys = function() {     if(this.isleftkey){         this.xpos += -this.speed;         this.dir = 'left';     }     if(this.isrightkey){         this.xpos += this.speed;         this.dir = 'right';     } }; // end of hero class   // entity class function entity(img,xpos,ypos,width,height,scalex,scaley){     this.img = img;     this.xpos = xpos;     this.ypos = ypos;     this.width = width;     this.height = height;     this.scalex = scalex;     this.scaley = scaley; }  entity.prototype.draw = function(){     ctxentities.drawimage(this.img,0,0,this.width,this.height,this.xpos,this.ypos,this.scalex,this.scaley); }; // end of entity class   // input handling function keydown(e){     var keyid = (e.keycode) ? e.keycode : e.which;      if(keyid == 38 || keyid == 87){ //w         e.preventdefault();         hero.isupkey = true;     }     if(keyid == 37 || keyid == 65){ //a         e.preventdefault();         hero.isleftkey = true;     }     if(keyid == 40 || keyid == 83){ //s        e.preventdefault();        hero.isdownkey = true;     }     if(keyid == 39 || keyid == 68){ //d         e.preventdefault();         hero.isrightkey = true;     } }  function keyup(e){     var keyid = (e.keycode) ? e.keycode : e.which;      if(keyid == 38 || keyid == 87){         hero.isupkey = false;     }     if(keyid == 37 || keyid == 65){         hero.isleftkey = false;     }     if(keyid == 40 || keyid == 83){         hero.isdownkey = false;     }     if(keyid == 39 || keyid == 68){         hero.isrightkey = false;     } } // end of input handling 

update half of issue fixed marke. issue have, entitiesctx the context can draw images/rectangles. other ctx's can't draw anything. updated code.

using js “classes” draw on multiple canvas’s

[i expanded answer include example of using js classes]

this example illustrates 2 js-classes draw images on canvases

• the entity class controls , draws image on canvas.
• the hero class controls , draws spritesheets on canvas.

there image loader images loaded before used.

in question included js-class code , no specifics on project.

so made own project using hero , entity classes (pardon taking liberty).

this image shows entity , hero classes in action drawing on 3 of canvases...

this background canvas containing:

• a sky-blue rect filling canvas (the sky)
• the background contains 2 entity class objects.
• a sun image wrapped in entity class object
• a wall image wrapped in entity class object

this stage canvas containing:

• a cannon entity class object animates , down

this entities canvas containing:

• a cat image spritesheet image wrapped in hero class object
• the cat object animates sprites in response cannon object
• the cat composed of spritesheet that’s controlled hero class

the entity class controls , draws image on canvas:

• the image can moved , scaled.
• the entity class has 3 methods.
• entity.draw() draw image on canva.
• entity.set() set xy position of image on canvas.
• entity.scale() scale image.

here code entity class:

// entity class function entity(context,img,x,y){     this.context=context;     this.img = img;     this.xpos = x;     this.ypos = y;     this.width = img.width;     this.height = img.height;     this.scalex = img.width;     this.scaley = img.height; }  // entity.set() entity.prototype.set = function(x,y){     this.xpos=x;     this.ypos=y; }  // entity.scale() entity.prototype.scale = function(scalex,scaley){     this.scalex=scalex;     this.scaley=scaley; }  // entity.draw() entity.prototype.draw = function(){     this.context.drawimage(this.img,         0,0,this.width,this.height,         this.xpos,this.ypos,this.scalex,this.scaley); } 

the hero class controls , draws spritesheets on canvas

• the individual sprites pulled spritesheet image.
• each sprite defined object having x,y,width,height within spritesheet.
• the sprites can moved , scaled.
• the hero class has 3 methods.
• hero.draw() draw 1 of sprites on canvas.
• hero.set() set sprite drawn , xy position on canvas
• hero.scale() scale sprite.

here code hero class:

// hero class function hero(context,img,spritedefs) {     this.context=context;     this.spritedefs=spritedefs;     this.img = img;     this.xpos = 0;     this.ypos = 0;     this.srcx = 0;     this.srcy = 0;     this.width = img.width;     this.height = img.height;     this.scalex = img.width;     this.scaley = img.height;     this.isupkey;     this.isdownkey;     this.isleftkey;     this.isrightkey;      this.speed = 2;     this.defspeed = 3.5;     this.dir = 'right'; }  // hero.set() hero.prototype.set = function(spritenumber,x,y){     // pull specified sprite     var sprite=this.spritedefs[spritenumber];     this.srcx=sprite.x;     this.srcy=sprite.y;     this.width=sprite.width;     this.height=sprite.height;     // default scale 100%     this.scalex=sprite.width;     this.scaley=sprite.height;     this.xpos=x;     this.ypos=y; }  // hero.scale() hero.prototype.scale = function(scalex,scaley){     this.scalex=scalex;     this.scaley=scaley; }  // hero.draw() hero.prototype.draw = function() {     this.context.drawimage(this.img,         this.srcx,this.srcy,this.width,this.height,         this.xpos,this.ypos,this.scalex,this.scaley); } 

this image loader makes sure images loaded before used

var imageurls=[]; var imagesok=0; var imgs=[]; imageurls.push("cats.png"); imageurls.push("cannonlifted.png"); imageurls.push("brickwall.jpg"); imageurls.push("sun.png"); loadallimages();  function loadallimages(){     (var = 0; < imageurls.length; i++) {       var img = new image();       imgs.push(img);       img.onload = function(){ imagesok++; imagesallloaded(); };       img.src = imageurls[i];     }       }  var imagesallloaded = function() {   if (imagesok==imageurls.length ) {      // images loaded ready use      cat=imgs[0];      cannon=imgs[1];      wall=imgs[2];      sun=imgs[3];      start();   } }; 

here complete code , fiddle: http://jsfiddle.net/m1erickson/ycw9u/

<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>  <style>     body{ background-color: ivory; padding:20px; }     h3{ font-size:2em; }     #wrapper{         position:relative;         width:350px;         height:400px;     }     #bg,#stage,#entities{         position:absolute; top:0px; left:0px;         border:1px solid green;         width:100%;         height:100%;     } </style>  <script> $(function(){       //////////////////////////////     // context references     //////////////////////////////       // stage     var stage = document.getelementbyid('stage');     var ctxstage = stage.getcontext('2d');     // entities     var entitiesstage = document.getelementbyid('entities');     var ctxentities = entitiesstage.getcontext('2d');     // background     var bg = document.getelementbyid('bg');     var ctxbg = bg.getcontext('2d');       //////////////////////////////     // public variables     //////////////////////////////       // images     var wall,cat,cannon,sun;      // display objectx     var sunentity,wallentity,cannonentity,cathero;      // animation vars      var cannonx=65;     var cannonmove=-10;     var cannonmin=75;     var cannonmax=185;     var cannony=185;     var cannonsafe=145;      // cat hero sprites     var catspritenames={         laying:0,         layingx:250,         layingy:127,         standing:1,         standingx:165,         standingy:25     };     var catsprites=[         {x:80, y:30, width:67, height:48},         {x:15, y:8,  width:47, height:78}     ];       //////////////////////////////     // preload images     //////////////////////////////       var imageurls=[];     var imagesok=0;     var imgs=[];     imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cats.png");     imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/cannonlifted.png");     imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/brickwall.jpg");     imageurls.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sun.png");     loadallimages();      function loadallimages(){         (var = 0; < imageurls.length; i++) {           var img = new image();           imgs.push(img);           img.onload = function(){ imagesok++; imagesallloaded(); };           img.src = imageurls[i];         }           }      var imagesallloaded = function() {       if (imagesok==imageurls.length ) {          // images loaded ready use          cat=imgs[0];          cannon=imgs[1];          wall=imgs[2];          sun=imgs[3];          start();       }     };       //////////////////////////////     // build display objects      // , start animation     //////////////////////////////       function start(){          // static background (canvas: bg)         // rectangle=blue sky         ctxbg.rect(0,0,bg.width,bg.height);         ctxbg.fillstyle="skyblue";         ctxbg.fill();         // sun image @ 75% scale         sunentity=new entity(ctxbg,sun,185,15);         sunentity.set(25,15);         sunentity.scale(sun.width*.75,sun.height*.75);         sunentity.draw();         // wall image         wallentity=new entity(ctxbg,wall,250,bg.height-wall.height);         wallentity.set(250,bg.height-wall.height,wall.width,wall.height);         wallentity.draw();           // stage (canvas: stage)         // contents: wall         cannonentity=new entity(ctxstage,cannon,cannonx,cannony,cannon.width,cannon.height,cannon.width,cannon.height);         cannonentity.draw();           // entities (canvas: entities)         // contents:          cathero=new hero(ctxentities,cat,catsprites);         cathero.set(catspritenames.laying,catspritenames.layingx,catspritenames.layingy);         cathero.draw();          animate();     }      function animate(){          cannony+=cannonmove;         if(cannony<cannonmin){ cannony=cannonmin; cannonmove=-cannonmove; }         if(cannony>cannonmax){ cannony=cannonmax; cannonmove=-cannonmove; }          cannonentity.context.clearrect(0,0,stage.width,stage.height);         cannonentity.set(cannonx,cannony);         cannonentity.draw();          if(cannony>cannonsafe){             cathero.set(catspritenames.laying,catspritenames.layingx,catspritenames.layingy);         }else{             cathero.set(catspritenames.standing,catspritenames.standingx,cannony-50);         }         cathero.context.clearrect(0,0,entities.width,entities.height);         cathero.draw()           window.settimeout(function(){animate();},500);     }       // hero class     function hero(context,img,spritedefs) {         this.context=context;         this.spritedefs=spritedefs;         this.img = img;         this.xpos = 0;         this.ypos = 0;         this.srcx = 0;         this.srcy = 0;         this.width = img.width;         this.height = img.height;         this.scalex = img.width;         this.scaley = img.height;         this.isupkey;         this.isdownkey;         this.isleftkey;         this.isrightkey;          this.speed = 2;         this.defspeed = 3.5;         this.dir = 'right';     }     // hero.set()     hero.prototype.set = function(spritenumber,x,y){         // pull specified sprite         var sprite=this.spritedefs[spritenumber];         this.srcx=sprite.x;         this.srcy=sprite.y;         this.width=sprite.width;         this.height=sprite.height;         // default scale 100%         this.scalex=sprite.width;         this.scaley=sprite.height;         this.xpos=x;         this.ypos=y;     }     // hero.scale()     hero.prototype.scale = function(scalex,scaley){         this.scalex=scalex;         this.scaley=scaley;     }     // hero.draw()     hero.prototype.draw = function() {         this.context.drawimage(this.img,             this.srcx,this.srcy,this.width,this.height,             this.xpos,this.ypos,this.scalex,this.scaley);     }       // entity class     function entity(context,img,x,y){         this.context=context;         this.img = img;         this.xpos = x;         this.ypos = y;         this.width = img.width;         this.height = img.height;         this.scalex = img.width;         this.scaley = img.height;     }     // entity.set()     entity.prototype.set = function(x,y){         this.xpos=x;         this.ypos=y;     }     // entity.scale()     entity.prototype.scale = function(scalex,scaley){         this.scalex=scalex;         this.scaley=scaley;     }     // entity.draw()     entity.prototype.draw = function(){         this.context.drawimage(this.img,             0,0,this.width,this.height,             this.xpos,this.ypos,this.scalex,this.scaley);     }  }); // end $(function(){}); </script>  </head>  <body>     <h3>watch out kitty!</h3><br>     <div id="wrapper">         <canvas id="bg" width=350 height=400></canvas>         <canvas id="stage" width=350 height=400></canvas>         <canvas id="entities" width=350 height=400></canvas>     </div> </body> </html>