html5 canvas background image disappear on mousemove

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


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


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




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>


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)


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.