Как нарисовать изображение и эскиз на холсте вместе

Question

Я хочу нарисовать изображение на холсте, а затем позволить пользователю нарисовать эскиз на нем с помощью sketch.js. Сейчас ситуация такова:

  1.the image has been drawn on the canvas successfully
  2. but when my mouse over the canvas, then image disappeared, and the canvas shows empty
  3. when I dragged the mouse, some sketch shows on the empty canvas(the sketch looks correct)

Итак, я выполнил обе функции правильно, но я запутался в роли между ними. Я надеюсь нарисовать эскиз на холсте с изображением на нем. Вот мой код:

index.html:

<canvas id="mysketch" width="578" height="400" style="margin: 0px; "></canvas>

canvas.js:

var mysketch = jQuery("#mysketch");

// draw the captured image to canvas 
    var displayImage = function() {
    var context = mysketch.get(0).getContext("2d");     
        var image = new Image();

        image.onload = function() {
            context.drawImage(image, 0, 0);
        }

    // prepend the required image info again
        image.src = dataURL;

        // call sketch.js to draw sketch on the canvas
    mysketch.sketch({defaultColor: "#ff0"});

    }

Answer 1

Я думаю, что на ваш призыв к эскизу метода
sketch.js сначала очищает холст, а затем позволяет рисовать что-то на нем.
Как вы можете видеть в ссылке здесь, в 3-м примере (т.е. в Примере инструментов) изображение не рисуется методом drawImage.
Это на самом деле фон холста, который всегда будет там в качестве фона, что бы вы ни рисовали на нем.

Итак, что вы можете сделать, это:

либо сделайте то же самое, что и в примере, т.е. установите изображение в качестве фона,

или создайте новый холст сразу за холстом с той же шириной, высотой и в том же месте и нарисуйте на нем свое изображение. и сделай свой набросок на втором.