I am looking to incorporate the ability for users to draw sketches on an image displayed on a canvas. Currently, I am utilizing the sketch.js jQuery library and have encountered the following issues:
- The image loads successfully onto the canvas.
- However, when the mouse hovers over the canvas, the image disappears.
- Dragging the mouse results in sketch marks appearing on the empty canvas instead of over the image as intended.
In conclusion, it seems that sketch.js is clearing the canvas but I am unsure how to resolve this issue. Any assistance would be greatly appreciated!
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>