Javascript 如何在画布上同时绘制图像和草图

我想在画布上绘制一幅图像，然后允许用户通过sketch.js在上面绘制一些草图。现在的情况是：

  1.the image has been drawn on the canvas successfully
  2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
  3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)

所以，我把两个函数都做对了，但我对两者之间的部分感到困惑。我希望在画布上画草图，上面有图像。这是我的密码：

index.html：

<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>

---

我认为，在你调用素描方法时
sketch.js首先清除画布，然后允许您在画布上绘制一些东西。
正如您在链接中看到的，在第三个示例（即工具示例）中，图像不是通过drawImage方法绘制的。
它实际上是画布的背景，无论你在画布上画什么，它都会一直作为背景出现。

因此，您可以做的是：

或者执行与示例中相同的操作，即将图像设置为背景，

---

或者在画布后面制作一块宽度、高度和位置相同的新画布，并在其上绘制图像。然后在第二个屏幕上绘制草图。

您确定没有用于“悬停”事件的css或其他功能吗？谢谢。但我认为它不起作用——我想先显示图像，然后再显示草图；对于两个画布，只有一个可以停留在顶部。对于第二个画布，请不要设置背景属性，这将使其透明。或者您可以先在画布上绘制图像，然后让用户在其上绘制草图，但最重要的是，您不清除画布，这会使图像消失。您是对的，sketch.js首先清除了画布，我已经修复了它。只允许一张画布，就可以了。再次感谢！伙计们，我一直在关注你们的答案。我有两块画布，一块我保留了img，另一块我画了草图。这是我的两层画布。现在在画布上画了草图后，我好像在画图像。我的问题是如何像使用橡皮擦一样擦除草图？帮助PLZ使用画布的上下文对象的clearRect（x、y、宽度、高度）

var mysketch = jQuery("#mysketch");

// draw the captured image to canvas 
    var displayImage = function() {
    var context = mysketch.get(0).getContext("2d");     
        var image = new Image();

        image.onload = function() {
            context.drawImage(image, 0, 0);
        }

    // prepend the required image info again
        image.src = dataURL;

        // call sketch.js to draw sketch on the canvas
    mysketch.sketch({defaultColor: "#ff0"});

    }