11 Vote

HTML5 Canvas: Clear or delete content for redrawing

Question by PC Control | 2014-05-22 at 17:04

I would like to refresh and redraw some contents on my HTML 5 canvas. However, I have painted some things on the canvas before that should not be visible after the update.

Is it possible to delete or clear the contents from the canvas, so that I have an empty area again on which I can draw something new?

2Best Answer2 Votes

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

ReplyPositive Negative

Related Topics

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.


Ask your own question or write your own article on askingbox.com. That’s how it’s done.