I'm currently developing a mobile application using the canvas element to be deployed for Android, iPad, iPhone, and other mobile devices which support the canvas element. In this application, we are using overhead maps, and to decrease rendering time, we are cropping these maps with the "context.clip();" method (originally we had just rendered the whole map and painted over the outer regions).

This ended up causing some issues, as once you have defined a clipping region, you cannot modify or otherwise change it. Our solution was to use the "context.save();" and "context.restore();" before and after our clipping in order to continue to draw elsewhere, but it seems that there should be either a way to add to the clipping region (such as setting it to the width/height of the canvas element as it does when the element is first initiated), or being able to clear the clip.

I've put together some small examples to demonstrate what we tried, and our solution:

What we tried - http://jsfiddle.net/v7e32/

Our solution - http://jsfiddle.net/eCegg/

If there are any other question you have, let me know.

David Bradbury