Canvas strokeText() Method

Example

Write "Hello world!" and "Big smile!" (with gradient) on the canvas, using strokeText():

JavaScript:

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

ctx.font = "20px Georgia";
ctx.strokeText("Hello World!", 10, 50);

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, 90);

Try it Yourself »

Description

The strokeText() method draw a text on the canvas.

The default strokeStyle is #000000 (solid black).

Tip: Use the font property to specify font and font size, and use the strokeStyle property to render the text in another color/gradient.

Se Also:

The font Property (Set text font and size)

The fillStyle Property (Set text color/gradient)

The textAlign Property (Set text alignment)

The textBaseline Property (Set text baseline)

The fillText() Method (Draw the text)

context.strokeText(text, x, y, maxWidth)

Parameter Values

Param	Description	Play it
text	The text to be written on the canvas	Play it »
x	The x coordinate start position	Play it »
y	The y coordinate start position	Play it »
maxWidth	(Optional) The maximum text width in pixels	Play it »

Return Value

NONE

Browser Support

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

strokeText() is supported in all modern browsers:


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

❮ Canvas Reference