Как стирать на холсте, не стирая фон

Question

У меня есть холст, на котором я drawimage() должен быть фоном.

У меня есть инструмент ластика, с помощью которого я хочу иметь возможность стирать то, что рисую, но не изображение, которое есть на холсте.Я знаю, что могу поместить изображение в качестве отдельного элемента позади холста, но это не то, что мне нужно, поскольку я хочу сохранить то, что находится на холсте, как изображение.

Моя функция рисования здесь:

function draw (event) {     
    if (event == 'mousedown') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'mousemove') {
        context.lineTo(xEnd, yEnd);
    } else if (event == 'touchstart') {
        context.beginPath();
        context.moveTo(xStart, yStart);
    } else if (event == 'touchmove') {
        context.lineTo(xEnd, yEnd);
    }
    context.lineJoin = "round";
    context.lineWidth = gadget_canvas.radius;
    context.stroke();                   
}

Если мне понадобится дальнейшее объяснение, я сделаю это.

Заранее спасибо.

Answer 1

Есть несколько способов сделать это.

Я бы порекомендовал поместить изображение в качестве CSS "background-image" на холсте. Затем нарисуйте на холсте, как обычно.

Если вы хотите сохранить холст как изображение, вам нужно выполнить последовательность событий:

1. Создайте холст в памяти, такой же большой, как ваш обычный холст. Назовите это can2
2. ctx2.drawImage(can1, 0, 0) // нарисовать первый холст на новом холсте
3. ctx.clearRect(0, 0, width, height) // очистить первый холст
4. ctx.drawImage(background, 0, 0) // нарисовать изображение на первом холсте
5. ctx.drawImage(can2, 0, 0) // отрисовать (сохраненный) первый холст обратно в себя

Это позволит вам получить лучшее из обоих миров.

Answer 2

Я сохранил путь к изображению в массиве, когда я очистил холст, я снова вызываю функцию init:

$( ".clear_canvas" ).click(function() {

      console.log("clear"); 

      var canvas = document.getElementById("canvasMain"),
      ctx=canvas.getContext("2d");

      ctx.setTransform(1, 0, 0, 1, 0, 0);
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

      //load the image again
      init(path,width,height);

      });