Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

HTML5 Canvas Clipping Region Tutorial

Description

To define a clipping region using HTML5 canvas, we can draw a path and then use the clip() method of the canvas context.  Everything drawn afterwards will be bound inside the clipping region.  Once we are done drawing things inside the clipping region, we can return the canvas context to its original state with the restore() method so that further drawings are not bound to the clipping region.

In this tutorial, we'll define a circular clipping region by drawing a circle and then using clip(), and then we'll draw a few circles which are clipped inside the circular path.  Next, we'll restore the canvas context to its original state with the restore() method, and then draw a ring around the original clipping region.

Demo