JavaScript Canvas Path2D Tutorial
last modified April 3, 2025
In this article, we explore the Canvas Path2D API in JavaScript. Path2D objects allow you to create, store, and reuse complex paths efficiently. This is essential for performance-critical canvas applications.
Basic Definition
Path2D is a JavaScript interface that represents a path that can be drawn on a canvas. It provides methods to create complex shapes that can be stored and reused multiple times.
The main advantage of Path2D is path reusability and better performance
for complex drawings. Path2D objects work with all standard canvas
path methods like moveTo, lineTo, and arc.
Basic Path2D Usage
This example demonstrates how to create and draw a simple Path2D object.
<!DOCTYPE html>
<html>
<head>
<title>Basic Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a Path2D object
const path = new Path2D();
path.rect(50, 50, 200, 100);
// Draw the path
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.stroke(path);
</script>
</body>
</html>
In this basic example, we create a canvas element and get its 2D rendering context. We then create a new Path2D object and add a rectangle to it.
The path is drawn using the standard stroke method, passing
the Path2D object as an argument. This shows the simplest way to create
and use Path2D objects.
Complex Path with Path2D
This example shows how to create a more complex path using Path2D.
<!DOCTYPE html>
<html>
<head>
<title>Complex Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a complex Path2D object
const path = new Path2D();
path.moveTo(50, 50);
path.lineTo(150, 150);
path.lineTo(250, 50);
path.closePath();
// Draw the path
ctx.fillStyle = 'lightblue';
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;
ctx.fill(path);
ctx.stroke(path);
</script>
</body>
</html>
Here we create a triangular path using Path2D methods similar to standard canvas paths. The path is then both filled and stroked for visual effect.
The key difference is that this path is stored in a Path2D object and can be reused multiple times without needing to redefine the path commands.
Path2D with SVG Path Data
This example demonstrates creating a Path2D object from SVG path data.
<!DOCTYPE html>
<html>
<head>
<title>Path2D with SVG</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create Path2D from SVG path data
const svgPath = "M10 10 L90 10 L90 90 L10 90 Z";
const path = new Path2D(svgPath);
// Draw the path
ctx.fillStyle = 'lightgreen';
ctx.strokeStyle = 'darkgreen';
ctx.lineWidth = 3;
ctx.fill(path);
ctx.stroke(path);
</script>
</body>
</html>
This example shows how to create a Path2D object directly from SVG path data. The SVG string uses standard path commands like M (moveTo) and L (lineTo).
This is particularly useful when you want to reuse existing SVG paths in your canvas drawings or when working with vector graphics from design tools.
Reusing Path2D Objects
This example demonstrates the reusability of Path2D objects.
<!DOCTYPE html>
<html>
<head>
<title>Reusing Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create a star Path2D
const star = new Path2D();
star.moveTo(30, 0);
star.lineTo(40, 20);
star.lineTo(60, 20);
star.lineTo(45, 35);
star.lineTo(55, 55);
star.lineTo(30, 45);
star.lineTo(5, 55);
star.lineTo(15, 35);
star.lineTo(0, 20);
star.lineTo(20, 20);
star.closePath();
// Draw multiple stars
for (let i = 0; i < 5; i++) {
ctx.save();
ctx.translate(i * 80, i * 50);
ctx.fillStyle = `hsl(${i * 72}, 100%, 50%)`;
ctx.fill(star);
ctx.restore();
}
</script>
</body>
</html>
Here we create a complex star shape as a Path2D object. The same path is then reused to draw multiple stars at different positions with different colors.
This demonstrates the performance benefit of Path2D - the complex path is defined once but can be rendered many times with different transformations.
Combining Path2D Objects
This example shows how to combine multiple Path2D objects into one.
<!DOCTYPE html>
<html>
<head>
<title>Combining Path2D</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Create individual shapes
const circle = new Path2D();
circle.arc(100, 100, 50, 0, Math.PI * 2);
const square = new Path2D();
square.rect(50, 50, 100, 100);
// Combine paths
const combined = new Path2D();
combined.addPath(circle);
combined.addPath(square);
// Draw the combined path
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fill(combined);
</script>
</body>
</html>
This example creates two separate Path2D objects (a circle and a square)
and then combines them into a single Path2D object using addPath.
The combined path is then filled with a semi-transparent red color, showing how complex shapes can be built from simpler components and rendered together.
Source
In this article, we have explored the Path2D API for creating and reusing complex paths on HTML canvas. Path2D objects provide significant performance benefits for complex drawings and enable better code organization.
Author
List all JS Canvas tutorials.