Javascript/jQuery: remove shape/path from canvas

Question

I can't seem to find the function to remove a shape or path from the canvas after it has been created.

So I'm creating a bezier curve between 2 points with

beginPath();
bezierCurveTo();
stroke();
closePath();

. How can I remove this from the canvas once it's been created? I need to be able to call the remove function via toggle() and blur(). I'm sure something exists for this...

Thanks in advance for any help!

Answer 1

As far as I remember the specification you must call context.save() before drawing, then draw something, and then call context.restore() to return to the previous state.

Answer 2

You can't remove a path/shape from the canvas. You can draw something else over it or clear the canvas.

Answer 3

You might try using SVG instead of canvas. There's a fantastic library called Raphaël that makes working with SVG a breeze. It works in all browsers too, including IE6.

With SVG each shape is its own element that can be moved, transformed, or removed.

Answer 4

Thanks for the great input to all of you - it helped me find the solution:

context.clearRect(x,y,w,h);

(link)

This will clear anything within that rectangle.

I found the method on the page I found while digging for ILog's answer to save/restore the context, and it's all on there. Thanks again.