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
Post a Comment