html5 canvas background image disappear on mousemove

Question

I want to draw an image to canvas and then allow user to draw some sketch on it.i'm using sketch.js jquery library.the current status is:

the image has been loaded on the canvas successfully
but when my mouse over the canvas, then image disappeared.
when I dragged the mouse, some sketch shows on the empty canvas.the drown

correctly

so, i think the sketch.js did clear the canvas.but i don't know how to fix it.Any help??

canvas.html

<canvas id="tools_sketch" width="300" height="300" style="background: no-repeat center center;border:black 1px solid"></canvas>

here is my script

<script type="text/javascript">
    var sigCanvas = document.getElementById('tools_sketch');
    var context = sigCanvas.getContext('2d'); 
    var imageObj = new Image();
    imageObj.src = 'human-face.jpg';
    imageObj.onload = function() {
       context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.width);
    };

    $(function() {
       $('#tools_sketch').sketch({defaultColor: "#FF0000"});
    });

</script>

I checked your code... It's disappears on mousedown not mouseover! — thinklinux, Jun 01 '13 at 07:12
yeah.. anyway when i dragged the mouse sketch shown empty canvas. no problem with the sketch it's look correct — user1429833, Jun 01 '13 at 07:18

thinklinux · Answer 1 · 2013-06-01T07:57:37.473

5

If you don't need to save the image you can put it as a background to the canvas. You don't need to draw it every time.

style="background: url(your-image-here) no-repeat center center;"

<canvas id="tools_sketch" width="300" height="300" style="background: url(your-image-here) no-repeat center center;"></canvas>

UPDATE

It's a bug in sketch.js. You need to remove this line from sketch.js source:

this.el.width = this.canvas.width()

Because the canvas element works that way. Every resize is followed by clearing the canvas and sketch.js needs to redraw after the resize but the lib don't know about your image.

edited Jun 01 '13 at 07:57

answered Jun 01 '13 at 06:48

thinklinux

1,287
9
13

I want to save the drawing also if not there was no problem. – user1429833 Jun 01 '13 at 07:02
1

Ok. I found it. It's a bug in sketch.js. Remove this line from the sketch.js file: `this.el.width = this.canvas.width();` – thinklinux Jun 01 '13 at 07:46

score 1 · Answer 2 · edited Nov 20 '13 at 09:57

1

this.el.width = this.canvas.width()

just remove this line in your sketch.js

i don't know why they are not updating this sketch.js even if we found bugs & Solutions

edited Nov 20 '13 at 09:57

Ankur

5,086
19
37
62

answered Nov 20 '13 at 09:34

Raheem Shaik

37
3

score 1 · Answer 3 · answered Aug 04 '16 at 20:48

remove the width = line works, but I found if you draw with rgba(0, 0, 255, 0.5), you'll end up drawing with rgba(0, 0, 255, 1).

The reason is: while mouse move, redraw is called every time. So the canvas get reset, each previous point will be drawn. When above line removed, the same pixel will be drawn multiple times, thus removed the transparent. ( transparent added up, to 1)

html5 canvas background image disappear on mousemove

3 Answers3

Linked