2.15. The Clipping Region

This section discusses what is arguably the single most powerful Canvas feature: the clipping region. The clipping region is an area of the canvas, defined by a path, to which the browser restricts all drawing operations. By default, the clipping region is the same size as the canvas. Until you explicitly set the clipping region—by creating a path and subsequently invoking the Canvas context’s clip() method—the clipping region has no effect on what you draw in the canvas. However, once you set the clipping region, anything you draw in the canvas will be restricted to that region, meaning that anything you draw outside of the clipping region has no effect.

In this section we look at two examples that use the clipping region. The first example implements an eraser and the second implements a telescoping animation.