HTML5 Canvas - Как рисовать линию над фоном изображения?

Я пытаюсь нарисовать линию поверх фона изображения - в холсте HTML5. Однако всегда линия рисуется за изображением. Фактически линия набирается сначала, а затем рисунки рисуются - независимо от того, как я называю функции.

Как перенести строку в начало изображения?

var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
            context.clearRect(0, 0, canvas.width, canvas.height);
drawbackground(canvas, context); 
drawlines(canvas, context); 


function drawbackground(canvas, context){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}



function drawlines(canvas, context){


            context.beginPath();
            context.moveTo(188, 130);
            context.bezierCurveTo(140, 10, 388, 10, 388, 170);
            context.lineWidth = 10;
            // line color
            context.strokeStyle = "black";
            context.stroke();
}

Ответ 1

Полностью непроверенный код, но вы пробовали что-то вроде этого?

function drawbackground(canvas, context, onload){

    var imagePaper = new Image();


        imagePaper.onload = function(){


            context.drawImage(imagePaper,100, 20, 500,500);
            onload(canvas, context);
        };

      imagePaper.src = "images/main_timerand3papers.png";
}

а затем вызовите метод, подобный этому...

 drawbackground(canvas, context, drawlines);

Ответ 2

Чтобы быть более эффективным, предполагая, что вы собираетесь выполнять множественные перерисовки этой строки или строк, было бы установить CSS background-image для canvas как ваше изображение.

<canvas style="background-image:url('images/main_timerand3papers.png');"></canvas>

Ответ 3

Измените загрузку изображения на что-то вроде этого:

imagePaper.onload = function () {
    context.drawImage( imagePaper, 100, 20, 500, 500 );
    drawLines( canvas, context );
};

Затем убедитесь, что вы удалили предыдущий вызов drawLines.

Важным ответом на это решение является то, что функция onload будет выполняться когда-то в будущем, тогда как функция drawLines выполняется немедленно. Вы всегда должны быть осторожны с тем, как вы структурируете свои обратные вызовы, особенно при их вложении.

Ответ 4

Или вы можете попробовать следующее:

drawbackground(canvas, context);
context.globalCompositeOperation = 'destination-atop';
drawlines(canvas, context);