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被繪製在同一個畫布上。