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

    }

Are you sure there isnt some css or another function for a 'hover' event? — Hank, Oct 12 '12 at 00:44

score 1 · Accepted Answer · answered Oct 12 '12 at 07:13

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.

answered Oct 12 '12 at 07:13

Vijay

563
1
6
18

thanks. but I don't think it works -- I want to show the image first, then show the sketch on it; with two canvas, only one can stay on the top. – sophia Oct 15 '12 at 16:38
for the second canvas dont set the background property ,this will make it transparent. or you can first draw your image on the canvas and then let user draw sketch over it,, but most important thing that you dont clear the canvas in between this will make your image gone. – Vijay Oct 15 '12 at 16:57
you're right, sketch.js did clear the canvas first, and I've fixed it. Only allow one canvas, then it's fine. thanks again! – sophia Oct 19 '12 at 22:07
guys i was following ur answer it work actually.i have two canvas in one i have kept img and in one i have done sketch.these are my two layer of canvas.now after doing sketch in canvas it seems that i'm sketching in image.my problem is how to erase the sketch like using eraser(rubber)?help plz – kiransh Jan 11 '13 at 04:16
just use canvas's context object's clearRect(x,y,width,height) – Vijay Jan 12 '13 at 20:51

how to draw both image and sketch on canvas together

1 Answers1