HTML5 Canvas: Clear or delete content for redrawing

With using the function clearRect(), it is possible to empty a defined area from your canvas. Just pass to this function the values X, Y, W and H of the area that should be deleted.

To clear the whole canvas, accordingly, you have to pass the point 0/0 and the width and height of the canvas:

var x = 0;
var y = 0;
var w = context.canvas.width;
var h = context.canvas.height;

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

If you only want to clear parts of your canvas, just use another point and other values for the width and height. Of course, you can also specify the w and h values from the example above directly depending on the size of your canvas.

Important: If you have used the function translate(), you have to keep this in mind when specifying the coordinates.
2014-05-22 at 17:19