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 loaded on the canvas successfully
2. but when my mouse over the canvas, then image disappeared.
3. 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 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 loaded on the canvas successfully
2. but when my mouse over the canvas, then image disappeared.
3. 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>

• javascript
• html5-canvas

• I checked your code... It's disappears on mousedown not mouseover! – thinklinux Commented Jun 1, 2013 at 7:12
• yeah.. anyway when i dragged the mouse sketch shown empty canvas. no problem with the sketch it's look correct – user1429833 Commented Jun 1, 2013 at 7:18

3 Answers 3

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.

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

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)