How to clear the iOS and Mobile Webkit HTML5 Canvas

Took me forever to find this, but hopefully you found this post faster:

You can either use “context.clearRect(0, 0, canvas.width, canvas.height);” Which I found only worked sometimes, and best in desktop version of the browser.

What I did was the width trick (setting the canvas width to itself clears EVERYTHING), and since I had also drawn lines I had to run the beginPath() method like this:


context.fillStyle = "#000";
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.canvas.width = context.canvas.width;
context.beginPath();

Creating a rectangle that paints the whole screen was key for mobile. beginPath() will clear all the old paths for you. For some reason it kept leaving the last path I drew even when I was trying to clear the whole thing. Have fun!

One thought on “How to clear the iOS and Mobile Webkit HTML5 Canvas

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>