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 stroke() Method

❮ Canvas Reference

Example

Draw a path, shaped as the letter L - in a red color:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = "red";
ctx.stroke();
Try it Yourself »

Description

The stroke() method draws the current path.

The default strokeStyle is #000000 (solid black).

See Also:

The beginPath() Method (Begin a new path)

The closePath() Method (Close current path)

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

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

The fill() Method (Fill the current path)


Syntax

context.stroke()

Parameters

NONE

Return Value

NONE

Browser Support

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

stroke() is supported in all modern browsers:

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

❮ Canvas Reference