JavaScript Canvas Stroke Tutorial
last modified April 3, 2025
In this article, we explore the Canvas stroke methods in JavaScript. These methods are essential for drawing outlines of shapes and paths on HTML canvas. Mastering strokes is crucial for creating graphics and visualizations.
Basic Definition
Canvas stroke refers to the process of drawing the outline of a shape or path. Unlike fill which colors the interior, stroke draws only the boundary lines. The stroke style, width, and other properties can be customized.
The main stroke methods are stroke, strokeRect,
and strokeText. These work with path-drawing methods like
lineTo and arc to create outlined shapes.
Basic Stroke Usage
This example demonstrates how to draw a simple stroked rectangle on canvas.
<!DOCTYPE html>
<html>
<head>
<title>Basic Canvas Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = 'blue';
ctx.lineWidth = 5;
ctx.strokeRect(50, 50, 200, 100);
</script>
</body>
</html>
In this basic example, we create a canvas element and get its 2D rendering context. We set the stroke color to blue and line width to 5 pixels.
The strokeRect method draws a rectangle outline at position
(50,50) with width 200 and height 100. This demonstrates the simplest way
to create a stroked shape on canvas.
Custom Path with Stroke
This example shows how to create a custom path and stroke it.
<!DOCTYPE html>
<html>
<head>
<title>Custom Path Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 150);
ctx.lineTo(250, 50);
ctx.closePath();
ctx.strokeStyle = 'red';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>
Here we create a custom triangular path using beginPath,
moveTo, and lineTo. The closePath
connects the last point to the first.
After defining the path, we set stroke properties and call stroke
to draw the outline. This shows how to stroke complex custom paths.
Dashed Line Stroke
This example demonstrates creating dashed lines using the lineDash property.
<!DOCTYPE html>
<html>
<head>
<title>Dashed Line Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.setLineDash([5, 3]);
ctx.strokeStyle = 'green';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.lineTo(250, 100);
ctx.stroke();
</script>
</body>
</html>
This example creates a dashed horizontal line. The setLineDash
method takes an array specifying the length of dashes and gaps.
Here we use [5,3] meaning 5px dashes with 3px gaps. The line is drawn from (50,100) to (250,100) with green color and 2px width.
Gradient Stroke
This example shows how to apply a gradient to a stroke.
<!DOCTYPE html>
<html>
<head>
<title>Gradient Stroke</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 300, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
ctx.strokeStyle = gradient;
ctx.lineWidth = 10;
ctx.beginPath();
ctx.arc(150, 100, 80, 0, Math.PI * 2);
ctx.stroke();
</script>
</body>
</html>
Here we create a linear gradient that transitions from red to yellow to blue. This gradient is applied as the stroke style for a circular path.
The createLinearGradient defines the gradient direction.
addColorStop adds color transition points. The gradient
is then used to stroke a circle with 10px line width.
Advanced Stroke with Line Joins
This example demonstrates different line join styles for strokes.
<!DOCTYPE html>
<html>
<head>
<title>Line Join Styles</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Round join
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 150);
ctx.lineTo(150, 50);
ctx.lineJoin = 'round';
ctx.lineWidth = 15;
ctx.strokeStyle = 'red';
ctx.stroke();
// Bevel join
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 150);
ctx.lineTo(300, 50);
ctx.lineJoin = 'bevel';
ctx.lineWidth = 15;
ctx.strokeStyle = 'blue';
ctx.stroke();
// Miter join (default)
ctx.beginPath();
ctx.moveTo(350, 50);
ctx.lineTo(400, 150);
ctx.lineTo(450, 50);
ctx.lineJoin = 'miter';
ctx.lineWidth = 15;
ctx.strokeStyle = 'green';
ctx.stroke();
</script>
</body>
</html>
This example shows three different line join styles: round, bevel, and miter. Each style affects how corners are rendered when lines meet at sharp angles.
The lineJoin property controls this behavior. Round creates
rounded corners, bevel creates flattened corners, and miter creates sharp
pointed corners (default). Each path demonstrates one style.
Source
MDN Canvas stroke Documentation
In this article, we have explored various techniques for stroking paths and shapes on HTML canvas. Mastering these methods is essential for creating detailed graphics and visualizations in web applications.
Author
List all JS Canvas tutorials.