Canvas clip() Method

Example

Clip a 200*120 pixels region from the context. Then, draw a red rectangle. Only the part of the red rectangle that is inside the clipped area is visible:

Without clip():

With clip():

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Clip a rectangular area
ctx.rect(50, 20, 200, 120);
ctx.stroke();
ctx.clip();

// Draw red rectangle after clip()
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 150, 100);
</script>

Try it Yourself »

Description

The clip() method clips a region of any size from the original context.

Note

When a region is clipped, future drawing is limited to the clipped region.

However, you can save the context settings with the save() method before using the clip() method, and use restore() to restore it later.

Syntax

context.clip();

Parameters

NONE

Return Value

NONE

Browser Support

The <canvas> element is an HTML5 standard (2014).

clip() is supported in all modern browsers:


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮ Canvas Reference