how to draw both image and sketch on canvas together

Question

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:

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

    }

Answer 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.