Web/API/CanvasRenderingContext2D/stroke

The CanvasRenderingContext2D.stroke() method of the Canvas 2D API strokes (outlines) the current or given path with the current stroke style.

Strokes are aligned to the center of a path; in other words, half of the stroke is drawn on the inner side, and half on the outer side.

The stroke is drawn using the non-zero winding rule, which means that path intersections will still get filled.

Syntax

void ctx.stroke();
void ctx.stroke(path);

Parameters

path

A Path2D path to stroke.

Examples

A simple stroked rectangle

This example creates a rectangle using the rect() method, and then draws it to the canvas using stroke().

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rect(10, 10, 150, 100);
ctx.stroke();

Re-stroking paths

Typically, you'll want to call beginPath() for each new thing you want to stroke. If you don't, the previous sub-paths will remain part of the current path, and get stroked every time you call the stroke() method. In some cases, however, this may be the desired effect.

HTML

<canvas id="canvas"></canvas>

JavaScript

This code strokes the first path three times, the second path two times, and the third path only once.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// First sub-path
ctx.lineWidth = 26;
ctx.strokeStyle = 'orange';
ctx.moveTo(20, 20);
ctx.lineTo(160, 20);
ctx.stroke();

// Second sub-path
ctx.lineWidth = 14;
ctx.strokeStyle = 'green';
ctx.moveTo(20, 80);
ctx.lineTo(220, 80);
ctx.stroke();

// Third sub-path
ctx.lineWidth = 4;
ctx.strokeStyle = 'pink';
ctx.moveTo(20, 140);
ctx.lineTo(280, 140);
ctx.stroke();

Stroking and filling

If you want to both stroke and fill a path, the order in which you perform these actions will determine the result. In this example, the square on the left is drawn with the stroke on top of the fill. The square on the right is drawn with the fill on top of the stroke.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.lineWidth = 16;
ctx.strokeStyle = 'red';

// Stroke on top of fill
ctx.beginPath();
ctx.rect(25, 25, 100, 100);
ctx.fill();
ctx.stroke();

// Fill on top of stroke
ctx.beginPath();
ctx.rect(175, 25, 100, 100);
ctx.stroke();
ctx.fill();

Specifications

Specification	Status	Comment
HTML Living StandardThe definition of 'CanvasRenderingContext2D.stroke' in that specification.	Living Standard

Browser compatibility

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
stroke	Chrome Full support Yes	Edge Full support 12	Firefox Full support 1.5	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
Path parameter	Chrome Full support Yes	Edge Full support ≤18	Firefox Full support 31	IE No support No	Opera Full support Yes	Safari No support No	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 31	Opera Android ?	Safari iOS ?	Samsung Internet Android Full support Yes

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

See also

• The interface defining this method: CanvasRenderingContext2D

CanvasRenderingContext2D.stroke() by Mozilla Contributors is licensed under CC-BY-SA 2.5.