HTML5 problème de couche de toile

Question

J'ai problème similaire avec des couches comme décrit ici html5 - canvas element - Multiple layers

Mais, réponse acceptée ne fonctionne pas pour moi, comme pour layer1 j'ai rendu l'image (drawImage)

et la deuxième couche - layer2 (gradient) toujours sous layer1.

Exemple de code:

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

Vous définissez ctx2 au contexte layer1:

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

Bien sûr, étant donné que les charges d'image de façon asynchrone, l'événement onload feux après avoir déjà dessiné le gradient, et je t est dessiné sur la même toile.