JavaScript Canvas Clip Tutorial
last modified April 3, 2025
In this article, we explore the Canvas clipping methods in JavaScript. Clipping paths allow you to restrict drawing to specific regions of the canvas. This powerful technique enables creative effects and optimized rendering.
Basic Definition
Canvas clipping is the process of defining a region where drawing operations will be visible. Anything drawn outside the clipping path will not be shown. The clipping path acts like a mask for subsequent drawing operations.
The main clipping method is clip, which uses the current path
as the clipping region. Multiple clipping paths can be combined using path
operations. The clipping region can be saved and restored with the canvas state.
Basic Clip Usage
This example demonstrates how to create a simple circular clipping region.
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Clip</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create circular clipping path
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.clip();
// Draw rectangle (only visible inside circle)
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 300, 200);
</script>
</body>
</html>
In this basic example, we create a circular path and call clip.
This sets the clipping region to the circle. The blue rectangle that follows
is only visible within this circular area.
The clipping path persists until the canvas state is restored or reset. All subsequent drawing operations will be clipped to this region.
Clipping with Complex Paths
This example shows how to create a star-shaped clipping region.
<!DOCTYPE html>
<html>
<head>
<title>Complex Path Clip</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create star-shaped clipping path
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(175, 125);
ctx.lineTo(250, 125);
ctx.lineTo(190, 175);
ctx.lineTo(210, 250);
ctx.lineTo(150, 200);
ctx.lineTo(90, 250);
ctx.lineTo(110, 175);
ctx.lineTo(50, 125);
ctx.lineTo(125, 125);
ctx.closePath();
ctx.clip();
// Draw gradient (only visible inside star)
const gradient = ctx.createLinearGradient(0, 0, 300, 300);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'yellow');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 300, 300);
</script>
</body>
</html>
Here we create a complex star-shaped path using multiple lineTo
calls. The clip method converts this path into a clipping region.
The gradient fill that follows is only visible within the star shape. This demonstrates how any complex path can be used as a clipping mask.
Multiple Clipping Regions
This example shows how to combine multiple clipping paths.
<!DOCTYPE html>
<html>
<head>
<title>Multiple Clipping Regions</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// First clipping circle
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.clip();
// Second clipping circle (intersects with first)
ctx.beginPath();
ctx.arc(200, 100, 60, 0, Math.PI * 2);
ctx.clip();
// Draw pattern (only visible in intersection)
ctx.fillStyle = 'green';
for (let x = 0; x < 300; x += 20) {
for (let y = 0; y < 200; y += 20) {
ctx.fillRect(x, y, 10, 10);
}
}
</script>
</body>
</html>
This example creates two overlapping circular clipping regions. The effective clipping area becomes the intersection of both circles where they overlap.
The grid pattern is only drawn where both clipping circles intersect. This demonstrates how multiple clip calls combine to create complex regions.
Clipping with Save/Restore
This example demonstrates using save/restore to manage clipping states.
<!DOCTYPE html>
<html>
<head>
<title>Save/Restore Clip</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Save initial state
ctx.save();
// Create first clipping region (left circle)
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.clip();
// Draw in first region
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(0, 0, 400, 200);
// Restore state and create second clipping region
ctx.restore();
ctx.beginPath();
ctx.arc(300, 100, 80, 0, Math.PI * 2);
ctx.clip();
// Draw in second region
ctx.fillStyle = 'rgba(0, 0, 255, 0.5)';
ctx.fillRect(0, 0, 400, 200);
</script>
</body>
</html>
Here we use save and restore to manage different
clipping states. The first clipping circle is created after saving the state.
After drawing, we restore to the original state and create a second clipping circle. This allows us to have separate clipping regions without overlap.
Text Clipping Effect
This example creates a clipping effect using text as the clipping path.
<!DOCTYPE html>
<html>
<head>
<title>Text Clipping Effect</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Set large font for clipping
ctx.font = 'bold 100px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
// Create text clipping path
ctx.beginPath();
ctx.fillText('CLIP', 250, 100);
ctx.clip();
// Draw gradient inside text
const gradient = ctx.createLinearGradient(0, 0, 500, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 500, 200);
</script>
</body>
</html>
This creative example uses text as a clipping path. The fillText
method creates the text path which is then used for clipping.
The gradient fill that follows is only visible within the text characters. This technique can be used to create interesting text effects and masks.
Source
In this article, we have explored various techniques for using clipping paths on HTML canvas. Mastering clipping enables advanced graphical effects and optimized rendering in web applications.
Author
List all JS Canvas tutorials.