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!

I just wanted to mention that the use of `closePath()` here and in many of the answers is wrong. It is used to complete a path by drawing a line to the path's start. Calling it after `stroke` does **absolutely nothing.** http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath — Brian McCutchon, Jul 31 '13 at 04:16

score 23 · Answer 1 · answered Dec 04 '12 at 00:24

Try this:

ctx.save();
ctx.globalCompositeOperation = "destination-out";
// drawing here you path second time
ctx.restore();

"The globalCompositeOperation attribute sets how shapes and images are drawn onto the scratch bitmap" specs

How it works you can see here.

score 12 · Answer 2 · answered Oct 15 '12 at 13:38

This is an important thing to realise about <canvas>. It's a flattened image made up of pixels. Once something's drawn to it, it's merged into the pixel grid and cannot be differentiated from the other pixels.

If you need to be able to separate image elements you could:

Overlay <canvas> elements into a stack of layers
Use <svg> in which each visual element is distinct from the other elements and may be manipulated independently

You can think of <canvas> as being a single layer in PhotoShop/Gimp/Fireworks, or an MSPaint document.

You can think of <svg> as a document in Illustrator/InkScape.

score 7 · Accepted Answer · answered Apr 03 '10 at 19:18

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.

score 5 · Answer 4 · answered Apr 03 '10 at 17:33

5

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

answered Apr 03 '10 at 17:33

nxt

1,983
12
13

score 1 · Answer 5 · answered Apr 03 '10 at 18:40

1

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.

answered Apr 03 '10 at 18:40

bcherry

7,150
2
28
37

1

A retrospective comment here - if you are drawing a lot, SVG will generally be less performant than canvas. I am currently refactoring an app that does a lot of drawing in SVG to using canvas. – Artur Sapek Jun 22 '14 at 14:35

Coder X · Answer 6 · 2013-07-31T08:31:35.400

1

To clear your canvas, use the following code

    canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

Always use beginPath method when you are starting to draw a new path and closePath method after you finished drawing your path.

NOTE: Paths that are not closed cannot be cleared.

If your paths are not getting cleared, it must be because of the above reason.

All path MUST begin with beginPath() and end with closePath()

Example:

     canvas_context.beginPath();
     canvas_context.moveTo(x1,y1);
     canvas_context.lineTo(x2,y2);
     canvas_context.stroke();
     canvas_context.closePath();

The following code also clears your canvas

    canvas_1.width = canvas_1.width;

NOTE: The above statement reinitializes a canvas hence it clears a canvas. Any statement that reinitializes a canvas will clear a canvas.

edited Jul 31 '13 at 08:31

answered Jul 23 '11 at 14:07

Coder X

4,542
2
16
9

1

"All path MUST begin with beginPath() and end with closePath()" - Wrong! see http://stackoverflow.com/questions/10807230/what-exactly-is-a-canvas-path-and-what-is-the-use-of-ctx-closepath – Brian McCutchon Jul 31 '13 at 04:18
Just tested that again in my Chrome and you are right. Back in 2011 when I tested this in Chrome, the paths that were not closed never got cleared. Anyway, thanks for the update. – Coder X Jul 31 '13 at 08:38

score 0 · Answer 7 · answered Apr 03 '10 at 17:25

0

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.

answered Apr 03 '10 at 17:25

ILog

65
2

1

Thanks for the suggestion - I tried this (unsuccessfully) and then found this resource (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-state) stating: "The current path and the current bitmap are not part of the drawing state. The current path is persistent, and can only be reset using the beginPath() method. The current bitmap is a property of the canvas, not the context." Thanks anyway though, much appreciated! – bobsoap Apr 03 '10 at 18:45
save/restore only operate upon certain properties of the context, and calling them will never have a visible effect on the image if you don't draw something afterwards. [This article](http://www.tutorialspoint.com/html5/canvas_states.htm) provides more information. – Drew Noakes Oct 15 '12 at 13:32

score 0 · Answer 8 · answered Mar 29 '11 at 11:49

0

If you're using JQuery:

var elem = $("selector");
var canvas = elem.get(0);
var context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();

Replace "selector" with your actual JQuery selector.

answered Mar 29 '11 at 11:49

ObiHill

11,448
20
86
135

Javascript/jQuery: remove shape/path from canvas

8 Answers8

Linked