html5画布背景图像在鼠标移动时消失

我想在画布上绘制图像，然后允许用户在其上绘制一些草图。我正在使用草图.js http://intridea.github.io/sketch.js/jquery库。当前状态是：

1. 图像已成功加载到画布上
2. 但是当我的鼠标悬停在画布上时，图像就消失了。
3. 当我拖动鼠标时，一些草图显示在空画布上。淹没

正确地

所以，我认为 sketch.js 确实清除了画布。但我不知道如何修复它。有什么帮助吗？

画布.html

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

这是我的脚本

<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>

如果您不需要保存图像，可以将其作为画布的背景。你不需要每次都画它。

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

这是 sketch.js 中的一个错误。您需要从 sketch.js 源中删除此行：

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

因为画布元素就是这样工作的。每次调整大小后都会清除画布，而 sketch.js 需要在调整大小后重新绘制，但库不知道您的图像。