HTML5 캔버스 레이어 문제

Question

여기 html5 - canvas element - Multiple layers

설명 된대로 내가 레이어와 유사한 문제가 있지만 Layer1을 위해 나는 이미지를 렌더링대로, 허용 대답은 나를 위해 (의 drawImage)를 작동하지 않습니다

그리고 두 번째 레이어 - layer2 (그라디언트) 항상 layer1 아래.

샘플 코드 :

canvas = document.getElementById("layer1"); 
    ctx = canvas.getContext("2d"); 

    var img = new Image(); 
    img.src = "/img/img.png"; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 
    }; 

    canvas2 = document.getElementById("layer2"); 
    ctx2 = canvas.getContext("2d"); 

    var my_gradient = ctx2.createLinearGradient(0, 0, 0, 400); 
    my_gradient.addColorStop(0, "black"); 
    my_gradient.addColorStop(1, "white"); 
    ctx2.fillStyle = my_gradient; 
    ctx2.fillRect(0, 0, 500, 555); 

HTML :

<canvas id="layer1" width="1000" height="1000" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> 
    <canvas id="layer2" width="1000" height="1000" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 

Answer 1

당신은 레이어 1의 상황에 ctx2을 설정하는 : 비동기 이미지를로드하기 때문에, 물론

ctx2 = canvas.getContext("2d"); 

의 onload 이벤트 이미 그라디언트를 그린 후에 발생합니다. t는 동일한 캔버스에 그려집니다.