clip

Summary

Specifies a new clipping region by calculating the intersection of the current clipping region and the area described by the intended path, using the non-zero winding number rule. The new clipping region replaces the current clipping region.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

var object = object.clip();

Return Value

Returns an object of type DOM NodeDOM Node

Type: HRESULT

If this method succeeds, it returns S_OK. Otherwise, it returns an HRESULT error code.

Examples

This example clips a region from a canvas, then draws a rectangle on the canvas, only part of which can be seen due to the clip.

<canvas id="myCanvas" width="300" height="150" style="border:1px solid blue;"></canvas>
<p>. . .</p>
<script>
var can = document.getElementById("myCanvas");
var ctxt = can.getContext("2d");
// Draw an open rectangle
ctxt.rect(50, 20, 200, 120);
ctxt.stroke();
// Clip the rectangle from the canvas
ctxt.clip();
// Draw filled rectangle in the upper left corner of the canvas after clip
ctxt.fillStyle = "green";
ctxt.fillRect(0, 0, 150, 100);
// Only the part of the filled rectangle that falls inside the clipped area is visible
</script>

Notes

When the context is initialized, the clipping region must be set to the rectangle with the top left corner at (0,0) and the width and height at that of the coordinate space.

Related specifications

W3C HTML Canvas 2D Context

W3C Candidate Recommendation

Attributions

• Microsoft Developer Network: Windows Internet Explorer API reference Article