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

I want to draw an image to canvas and then allow user to draw some sketch on it by sketch.js. Now the situation is:

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

so, I've made both functions right, but I'm confused about the part in between. I hope to draw the sketch on the canvas with the image on it. Here is my code:

所以,我已经使两个功能都正确,但我对两者之间的部分感到困惑。我希望在画布上绘制草图并在其上绘制图像。这是我的代码:

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

    }

1 个解决方案

#1

I think that, on your call to sketch method
sketch.js is clearing the canvas first then allows you to draw something on it.
As you can see in the link here, in the 3rd example (i.e. Tools Example) the image is not drawn by drawImage method.
It is actually the background of the canvas which will always be there as background, whatever you draw on it.

So what you can do is:

either do same thing as in the example i.e. set your image as background,

or make a new canvas just behind your canvas with same width, height and on same location and draw your image on it. and do your sketch thing on the second one.

我认为,在您调用sketch方法时,sketch.js首先清除画布然后允许您在其上绘制一些东西。正如您在此处的链接中所看到的,在第3个示例(即工具示例)中,图像不是由drawImage方法绘制的。它实际上是画布的背景,无论你在它上面画什么,它总是作为背景存在。所以你可以做的是:要么做与示例中相同的事情,即将图像设置为背景,要么在画布后面创建一个具有相同宽度,高度和相同位置的新画布,并在其上绘制图像。并在第二个上做你的草图。