HTML холст: вставить несколько изображений в отдельный холст

Question

У меня есть несколько холстов, каждый с атрибутом данных идентификатор, который используется для получения dataURL для того, чтобы сделать изображение выглядеть примерно так:

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

Ниже будет только поместить их в последнем холсте:

var $canvases = $(".drawing-result"); 
for (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 the code for retrieving dataURL using data-id 
    imageObj.src = dataURL; 

Я подозреваю, что это, возможно, придется делать с неглубоким копированием некоторых вещей, но это не может быть случая, потому что я ставлю вар везде.

Answer 1

Объявление переменной var JavaScript является областью действия, а не областью охвата. Ваш context перезаписывается каждый раз при запуске цикла.

Вместо этого для цикла, используйте .each() функцию JQuery в:

$(".drawing-result").each(function (i, canvas) { 
    var context = canvas.getContext('2d'); 
    var imageObj = new Image(); 
    imageObj.onload = function(){ 
    context.drawImage(this, 0, 0); 
    }; 
    // skipping the code for retrieving dataURL using data-id 
    imageObj.src = dataURL; 
});