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

<         


        

Answer 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.