Javascript HTML5画布-如何在图像背景上画一条线？

我试图在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();
}

---

完全未经测试的代码，但您是否尝试过类似的操作

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);

---

将图像加载更改为以下内容：

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

然后确保删除先前对

drawLines

的调用

---

此解决方案的一个重要特点是，

onload

函数将在将来某个时候执行，而drawLines函数将立即执行。您必须始终注意如何构造回调，尤其是在嵌套回调时。

为了提高效率，假设您要对这一行或几行进行多次重画，可以将画布的CSS

背景图像设置为您的图像

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


或者您可以尝试以下方法：

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

最后一行是否应该是退税地（画布、上下文、抽绳（画布、上下文））？不，因为在这种情况下，您将调用方法“drawlines”，然后使用其返回值作为参数。谢谢Simon。但是我也需要对背景做一些动态的改变。因此，我不使用CSS属性。这个答案值得更多的投票，因为它回答了解释