Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Canvas strokeStyle Property

❮ Canvas Reference

Example

Draw a rectangle with strokeStyle = "red":

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

ctx.strokeStyle = "red";
ctx.strokeRect(20, 20, 150, 100);
Try it Yourself »

More examples below.


Description

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.

The default value is #000000 (solid black).

See Also:

The fillStyle Property (Set fill color/style)

The lineWidth Property (Set the line width)

The beginPath() Method (Begin a new path)

The moveTo() Method (Move the path to a point)

The lineTo() Method (Add a line to the path)

The stroke() Method (Draw the current path)

The strokeRect() Method (Draw a rectangle)


Syntax

context.strokeStyle = color|gradient|pattern

Property Values

Value Description Play it
color A CSS color value that indicates the stroke color of the drawing. Default value is #000000 Play it »
gradient A gradient object (linear or radial) used to create a gradient stroke  
pattern A pattern object used to create a pattern stroke  


More Examples

Example

Draw a rectangle with a gradiant stokeStyle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, 170, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.lineWidth = 5;
ctx.strokeRect(20, 20, 150, 100);
Try it Yourself »

Example

Write the text "Big smile!" with a gradient strokeStyle:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px Verdana";

// Create gradient
const gradient = ctx.createLinearGradient(0, 0, c.width, 0);
gradient.addColorStop("0", "magenta");
gradient.addColorStop("0.5", "blue");
gradient.addColorStop("1.0", "red");

// Fill with gradient
ctx.strokeStyle = gradient;
ctx.strokeText("Big smile!", 10, 50);
Try it Yourself »

Browser Support

The <canvas> element is an HTML5 standard (2014).

stokestyle is supported in all modern browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11

❮ Canvas Reference