canvas.drawImage가 모든 이미지를 드로잉하지 않습니다.

Question

캔버스에 여러 이미지를 드로잉하고 싶습니다 (백그라운드, 다른 이미지 배경에 ). 이미지를로드 할 때와 그렇지 않은 경우가 있습니다. , drawImage 및 load에 지연을 위해 setTimeout을 사용했지만 여전히 작동하지 않습니다.

if(somecondition) 
{ 
    //background image is 70kb 
    //image on background is 65kb 

    img3.src = "Image path"; //images is almost 2kb 
    img4.src = "Image path"; //images is almost 2kb 
    img5.src = "Image path"; //images is almost 2kb 
    img6.src = "Image path"; //images is almost 2kb 
    setTimeout(function() 
    { 
     img3.onload = function() 
     { 
      context.drawImage(img3, 272, 139, 172, 31); 
     } 
    },1000); 
    console.log("Linesss2 > 4 "+lines2); 
    bottomY = 290+((lines1-5)*10); 
    middleHeight = bottomY - 170; 




    setTimeout(function() 
    { 
     img4.onload = function() 
     { 
      context.drawImage(img4, 272, 170, 172, middleHeight); ///272 
     } 
     img6.onload = function() 
     { 
      context.drawImage(img6, 272, bottomY, 172, 71); 
     } 
    },1000); 

    } 
    var metrics1 = context.measureText(canvasText1); 
    var testWidth1 = metrics1.width; 

    var metrics2 = context.measureText(canvasText2); 
    var testWidth2 = metrics2.width; 

    context.fillText(canvasText1, 169.5-(testWidth/2), y-20); 
    context.fillText(canvasText2, 169.5-(testWidth/2), y-20); 
    wrapTextForCanvas1(context, canvasText1, 50, 180); 
    wrapTextForCanvas2(context, canvasText2, 260, 180); 
} 

Answer 1

따라서 임의의 시간 초과를 실행하지 않으려는 경우 각 이미지가로드 될 때 알림을 받고 싶습니다. 그렇게하면 사용을 시작하기 전에 모두로드 된 것을 알 수 있습니다. 각 이미지의 onload 콜백을 설정하여 카운터를 증가시킵니다. 카운터가로드해야하는 이미지 수에 도달하면 모든 작업이 완료되고 이미지 카운터를 사용할 수 있습니다.

나는 최근에 또 다른 질문에 답변했다. 당신이 당신의 코드를 디버깅하는 사람을 원하는 경우 (www.jsfiddle.net)는 JSFiddle를 작성하고 링크를 게시 : Images from previous functions are not drawn in the background (Canvas)