如何在画布上同时绘制图像和素描

Question

我想在画布上绘制图像，然后允许用户通过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>

canvas.js：

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

    }

Answer 1

我认为，在您要求草绘方法时
sketch.js首先清除画布，然后允许您在其上绘制一些内容。
正如您在此处的链接中看到的那样，在第三个示例（即“工具示例”）中，图像不是通过drawImage方法绘制的。
实际上，它是画布的背景，无论您在其上绘制什么，它都将始终作为背景。

因此，您可以做的是：

可以执行与示例相同的操作，即将您的图片设置为背景，

或在画布后面以相同的宽度，高度和相同的位置制作新的画布，并在其上绘制图像。 然后在第二个上做草图。