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

要设置ctx2到层1的情况下：异步

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

当然，图像加载，因为，在onload事件你已经绘制了渐变之后发生的火灾，而我t被绘制在同一个画布上。