clip method

void clip([ JSAny fillRuleOrPath, CanvasFillRule fillRule ])

The CanvasRenderingContext2D.clip() method of the Canvas 2D API turns the current or given path into the current clipping region. The previous clipping region, if any, is intersected with the current or given path to create the new clipping region.

In the image below, the red outline represents a clipping region shaped like a star. Only those parts of the checkerboard pattern that are within the clipping region get drawn.

Note: Be aware that the clipping region is only constructed from shapes added to the path. It doesn't work with shape primitives drawn directly to the canvas, such as CanvasRenderingContext2D.fillRect. Instead, you'd have to use CanvasRenderingContext2D.rect to add a rectangular shape to the path before calling clip().

Note: Clip paths cannot be reverted directly. You must save your canvas state using CanvasRenderingContext2D.save before calling clip(), and restore it once you have finished drawing in the clipped area using CanvasRenderingContext2D.restore.

Implementation

external void clip([
  JSAny fillRuleOrPath,
  CanvasFillRule fillRule,
]);