javascript - html canvas: insert multiple images into separate canvas -


i have multiple canvases, each data-id attribute used retrieve dataurl in order draw image so:

<canvas data-id='2' class='drawing-result> 

the following put them in last canvas:

var $canvases = $(".drawing-result"); (var i=0; i<$canvases.length; i++){   var canvas = $canvases.get(i);   var context = canvas.getcontext('2d');   var imageobj = new image();   imageobj.onload = function(){     context.drawimage(this, 0, 0);   };   // skipping code retrieving dataurl using data-id   imageobj.src = dataurl; 

i suspect may have shallow copying things, can't case because put var everywhere.

javascript's var variable declaration function scoped, not block scoped. context being overwritten every time loop runs.

instead of for-loop, use jquery's .each() function:

$(".drawing-result").each(function (i, canvas) {   var context = canvas.getcontext('2d');   var imageobj = new image();   imageobj.onload = function(){     context.drawimage(this, 0, 0);   };   // skipping code retrieving dataurl using data-id   imageobj.src = dataurl; }); 

Comments

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

Using django-mptt to get only the categories that have items -