HTML Reference Manual

HTML Tag大全

HTML canvas strokeText() method

strokeText() is a Canvas 2D API is a method to draw text at the given (x, y) position. If the fourth parameter representing the maximum value is provided, the text will be scaled to fit the width.

HTML canvas reference manual

Online Example

Use strokeText() to write text "Basic Tutorial Website!" and "www.oldtoolbag.com!" (with gradient):

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<title>HTML canvas strokeText() method usage-Basic Tutorial (oldtoolbag.com)</title>/<title>
</<head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
2d
ctx.font="20px Georgia";
ctx.strokeText("Basic Tutorial Website!",10,50);
ctx.font="30px Verdana";
//　Create a gradient
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　Fill a gradient
ctx.strokeStyle=gradient;
ctx.strokeText("www.oldtoolbag.com!10,90);
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome and Safari support strokeText() method.

Note:Internet Explorer 8 and earlier versions do not support the <canvas> element.

Note:Safari does not support the maxWidth parameter.

Definition and usage

The strokeText() method draws text on the canvas (without filling). The default text color is black.

Tip:Please use font Properties to define font and size, and use strokeStyle Properties in another color/Render text with gradients.

JavaScript syntax:	context.strokeText(text,x,y,maxWidth);

Parameter value

Parameter	Description
text	Specifies the text to be output on the canvas.
x	The x coordinate position where the text starts to be drawn (relative to the canvas).
y	The y coordinate position where the text starts to be drawn (relative to the canvas).
maxWidth	Optional. The maximum text width in pixels allowed.

HTML canvas reference manual

HTML: <template> tag