How to erase on canvas without erasing background

Question

I have a canvas to which I drawimage() to be a background.

I have an eraser tool with which I want to be able to erase what I draw but not the image I have in the canvas. I know can place the image as a separate element behind the canvas but that is not what I am after since I desire to save what is in the canvas as a image.

My drawing function is here:

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

If I need to explain further I will.

Thank you in advance.

Your description sounds a bit off. Can you not put a layer above the canvas, and "save" the layer composite, in such a way that will allow you to conserve the background image (canvas) element? — Jared Farrish, Aug 01 '11 at 03:17
On each redraw, you need to draw image first — which will serve as a background — then draw everything else on top. That way, when you delete something from "upper" layer, image will stay intact (since it's always drawn first on each redraw). You can also take a look at canvas abstraction library like [fabric.js](http://kangax.github.com/fabric.js/demos/kitchensink/). — kangax, Aug 01 '11 at 06:28

score 6 · Accepted Answer · answered Aug 01 '11 at 12:38

There are a few ways you can go about this.

I'd recommend putting the image as the canvas's CSS "background-image". Then draw on the canvas as normal.

When you want to save the Canvas as an image, you will need to do a sequence of events:

Create an in-memory canvas just as big as your normal canvas. Call it can2
ctx2.drawImage(can1, 0, 0) // paint first canvas onto new canvas
ctx.clearRect(0, 0, width, height) // clear first canvas
ctx.drawImage(background, 0, 0) // draw image on first canvas
ctx.drawImage(can2, 0, 0) // draw the (saved) first canvas back to itself

This will let you have the best of both worlds.

After keeping image to background, while saving canvas as an image, it won't get capture.. Also for me drawImage is not working for me... you can check https://stackoverflow.com/questions/51720096/angular6-canvas-drawimage-not-working... Also requesting you to check https://stackoverflow.com/questions/51720673/angular-6-canvas-todataurlimage-png-not-capturing-canvas-background-image — Flutterian, Aug 07 '18 at 09:33

score 0 · Answer 2 · answered Nov 04 '13 at 13:52

I saved the image path in the an array, when I cleared the canvas I call the init function again:

$( ".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);

      });

How to erase on canvas without erasing background

2 Answers2