Canvas strokeStyle: Set Line and Shape Outline Colors

The Canvas strokeStyle property controls the paint used for stroked lines, paths, rectangle outlines and stroked text. Assign a CSS color, a CanvasGradient, or a CanvasPattern before calling a stroke method.

The default stroke style is black.

Basic strokeStyle example Top ↑

<canvas id="my_canvas" width="400" height="160"></canvas>

<script>
const canvas = document.getElementById('my_canvas');
const ctx = canvas.getContext('2d');

ctx.strokeStyle = '#d63384';
ctx.lineWidth = 8;
ctx.strokeRect(30, 30, 150, 80);
</script>

What values can strokeStyle use? Top ↑

strokeStyle accepts three main kinds of values:

Value	Use
CSS color	A valid CSS color such as `'red'`, `'#0d6efd'`, `'rgb(13 110 253)'`, or `'hsl(210 98% 52%)'`.
`CanvasGradient`	A gradient created with `createLinearGradient()` or `createRadialGradient()`.
`CanvasPattern`	A repeating or non-repeating pattern created with `createPattern()`.

ctx.strokeStyle = 'blue';
ctx.strokeStyle = '#198754';
ctx.strokeStyle = 'rgb(220 53 69)';
ctx.strokeStyle = 'hsl(45 100% 51%)';

See the related fillStyle tutorial for styling the inside of filled shapes.

Interactive stroke color demo Top ↑

Choose a color and change the rectangle position or size. This keeps the original page's interactive learning purpose while using native controls instead of a generated color table and jQuery UI sliders.

Stroke color X position: 20 Y position: 20 Width: 80 Height: 70

Using strokeStyle with paths and lines Top ↑

strokeStyle affects the next call to stroke(). Set it before stroking the path.

ctx.beginPath();
ctx.moveTo(30, 40);
ctx.lineTo(250, 40);
ctx.strokeStyle = 'green';
ctx.lineWidth = 6;
ctx.stroke();

For line construction, see moveTo() and lineTo().

Using a gradient as strokeStyle Top ↑

A CanvasGradient can be assigned directly to strokeStyle.

const gradient = ctx.createLinearGradient(0, 0, 250, 0);
gradient.addColorStop(0, 'blue');
gradient.addColorStop(1, 'red');

ctx.strokeStyle = gradient;
ctx.lineWidth = 12;
ctx.strokeRect(20, 20, 230, 80);

Continue with linear gradients or radial gradients.

Using a pattern as strokeStyle Top ↑

A CanvasPattern created by createPattern() can also be assigned to strokeStyle. The image or other pattern source must be ready before you create and use the pattern.

const pattern = ctx.createPattern(image, 'repeat');
if (pattern) {
  ctx.strokeStyle = pattern;
  ctx.lineWidth = 12;
  ctx.strokeRect(20, 20, 220, 100);
}

strokeStyle vs fillStyle Top ↑

Property	Controls
`strokeStyle`	Lines and outlines produced by `stroke()`, `strokeRect()`, and `strokeText()`.
`fillStyle`	The inside of shapes and text produced by `fill()`, `fillRect()`, and `fillText()`.

strokeStyle remains active until you change it Top ↑

Canvas drawing properties are stateful. After you set strokeStyle, later strokes use that value until you assign another one or restore a previously saved drawing state.

ctx.strokeStyle = 'purple';
ctx.strokeRect(10, 10, 80, 50);
ctx.strokeRect(110, 10, 80, 50); // still purple

Accessibility note Top ↑

Color changes drawn on Canvas are visual pixels. If stroke color communicates a status, category, warning or other important meaning, provide the same information in accessible HTML and do not depend on color alone.

Common strokeStyle mistakes Top ↑

Using fillStyle when you intend to change a line or outline.
Calling fillRect() after setting strokeStyle and expecting an outline. Use strokeRect() for an outline.
Setting strokeStyle after stroke() or strokeRect(); the new style only affects later drawing.
Treating strokeStyle as a function. It is a property, so assign a value with =.
Creating an image pattern before the image source has loaded.

Frequently asked questions Top ↑

What is the default Canvas strokeStyle? Top ↑

The default value is black.

Can strokeStyle use hex and RGB colors? Top ↑

Yes. It accepts valid CSS color values, including named colors, hexadecimal, RGB and HSL forms.

Can I use a gradient for a Canvas outline? Top ↑

Yes. Create a CanvasGradient and assign it to strokeStyle before drawing the stroke.

Does strokeStyle affect fillRect()? Top ↑

No. fillRect() uses fillStyle. Use strokeRect() when you want the current strokeStyle.

How do I change line thickness as well as color? Top ↑

Set lineWidth together with strokeStyle before stroking the path or shape.

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

Canvas strokeStyle: Set Stroke Colors and Styles