HTML 캔버스 : 별도의 캔버스에 여러 이미지를 삽입

Question

여러 개의 캔버스,과 같이 이미지를 그릴 위해 dataURL를 검색하는 데 사용되는 데이터-id 속성과 각이 있습니다 것입니다

<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; 

나는 얕은 복사와 함께 어떤 일을 할 수 있습니다 의심하지만 난 모든 곳에서 VAR을 넣어 때문에 그 사건을 수 없습니다.

Answer 1

JavaScript의 var 변수 선언은 기능 범위이며 블록 범위가 아닙니다. 루프가 실행될 때마다 context을 덮어 씁니다.

$(".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; 
});