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?
Related Topics
jQuery: Send HTML5 Canvas to Server via Ajax
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 1 - Introduction and Basics
Tutorial | 0 Comments
Send HTML5 Canvas as Image to Server
Tutorial | 0 Comments
How to resize Image before Upload in Browser
Tutorial | 13 Comments
HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 4 - Write Text on Canvas
Tutorial | 0 Comments
HTML5 Canvas: Beginner Tutorial Chapter 2 - Drawing Lines
Tutorial | 0 Comments
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.
Participate
Ask your own question or write your own article on askingbox.com. That’s how it’s done.
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:
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