Reputation: 4006
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.
Upvotes: 5
Views: 5831
Reputation: 972
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);
});
Upvotes: 0
Reputation: 63872
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:
ctx2.drawImage(can1, 0, 0)
// paint first canvas onto new canvasctx.clearRect(0, 0, width, height)
// clear first canvasctx.drawImage(background, 0, 0)
// draw image on first canvasctx.drawImage(can2, 0, 0)
// draw the (saved) first canvas back to itselfThis will let you have the best of both worlds.
Upvotes: 6