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:

1. the image has been l

Answer 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

Answer 2

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.

Answer 3

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)