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.

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.

• javascript
• html
• canvas

• Your description sounds a bit off. Can you not put a layer above the canvas, and "save" the layer posite, in such a way that will allow you to conserve the background image (canvas) element? – Jared Farrish Commented Aug 1, 2011 at 3:17
• Is context a globally-available object? – Jared Farrish Commented Aug 1, 2011 at 3:43
• 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. – kangax Commented Aug 1, 2011 at 6:28

2 Answers 2

There are a few ways you can go about this.

I'd remend 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:

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

This will let you have the best of both worlds.

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

      });