HTML canvas strokeText() Method

Example

let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");

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

ctx.font = "18px Verdana";

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

ctx.strokeStyle = gradient;
ctx.strokeText("Hello World 2!", 10, 100);

Try this code ❯

Meaning

The strokeText() method draws text on the canvas (no fill).

Standard Syntax

JavaScript syntax:

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

Parameter Values

Parameter	Description
text	Specifies the text that will be written on the canvas.
x	Specifies the x coordinate where to start painting the text.
y	Specifies the y coordinate where to start painting the text.
maxWidth	Specifies the maximum allowed width of the text, in pixels. (Optional)