HTML5 Canvas layer проблема

Question

У меня похожая проблема со слоями, как описано здесь html5 - элемент canvas - несколько слоев

Но принятый ответ не работает для меня, так как для 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 в контекст layer1:

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

Конечно, поскольку изображение загружается асинхронно, событие onload срабатывает после того, как вы уже нарисовали градиент, и оно рисуется на том же холсте.