YouTipCanvas Clip
## HTML Canvas clip() Method
The `clip()` method of the Canvas 2D API turns the current path into a clipping region. Once a clipping region is defined, any subsequent drawing operations (such as strokes, fills, or image rendering) will only be visible inside that region.
---
## Definition and Usage
The `clip()` method allows you to mask or crop drawings into any shape or size.
### Key Concepts:
* **Masking Effect:** Only the pixels that fall inside the clipping path will be rendered on the canvas. Anything drawn outside the clipping path will be hidden.
* **State Management:** Once a clipping region is set, it cannot be expanded or removed directly. To draw outside the clipped area later, you must save the canvas state using `context.save()` **before** calling `clip()`, and then restore it using `context.restore()` when you are done.
---
## Syntax
```javascript
context.clip();
context.clip(fillRule);
context.clip(path, fillRule);
```
### Parameters
* **`fillRule`** *(Optional)*: A string determining the algorithm to use to decide whether a point is inside or outside the clipping shape.
* `"nonzero"`: The non-zero winding rule (default).
* `"evenodd"`: The even-odd winding rule.
* **`path`** *(Optional)*: A `Path2D` object to use as the clipping mask. If not specified, the current default path is used.
---
## Code Examples
### Example 1: Basic Rectangular Clipping
This example clips a $200 \times 120$ pixel rectangular area. We then draw a red rectangle that overlaps the clipped area. Only the portion of the red rectangle inside the clipped region is visible.
```html
```
---
### Example 2: Circular Clipping with Save and Restore (Recommended Pattern)
This example demonstrates how to use `save()` and `restore()` to temporarily apply a circular clipping mask, draw an image or pattern inside it, and then restore the canvas to draw outside the clipped area again.
```javascript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// --- Step 1: Save the clean canvas state ---
ctx.save();
// --- Step 2: Create a circular clipping path ---
ctx.beginPath();
ctx.arc(150, 75, 50, 0, Math.PI * 2);
ctx.clip();
// --- Step 3: Draw inside the clipped region ---
// Fill the circle with a blue background
ctx.fillStyle = "blue";
ctx.fillRect(0, 0, 300, 150);
// Draw a yellow rectangle inside the circle
ctx.fillStyle = "yellow";
ctx.fillRect(120, 45, 60, 60);
// --- Step 4: Restore the canvas state ---
// This removes the clipping mask
ctx.restore();
// --- Step 5: Draw outside the clipped region ---
// This text will render normally because the clipping mask was removed
ctx.fillStyle = "black";
ctx.font = "16px Arial";
ctx.fillText("This text is outside the clip!", 10, 20);
```
---
## Best Practices & Considerations
1. **Always Use `save()` and `restore()`**:
Because clipping regions are cumulative and cannot be undone directly, always wrap your clipping code block like this:
```javascript
ctx.save(); // Save state (no clip active)
ctx.clip(); // Apply clip
// ... draw clipped content ...
ctx.restore(); // Restore state (clip is removed)
```
2. **Cumulative Clipping**:
If you call `clip()` multiple times without restoring the state, the new clipping region will be the *intersection* of the current clipping region and the new path.
3. **Performance**:
Complex vector paths used as clipping masks can be CPU/GPU intensive. Keep clipping paths as simple as possible for optimal rendering performance.
---
## Browser Compatibility
| Feature | Chrome | Edge | Firefox | Safari | Opera | Internet Explorer |
| :--- | :---: | :---: | :---: | :---: | :---: | :---: |
| **Basic Support** | Yes | Yes | Yes | Yes | Yes | 9.0+ |
| **Path2D Parameter** | 36+ | 14+ | 31+ | 9+ | 23+ | No |
*Note: Internet Explorer 8 and earlier versions do not support the `