strokeText method
Renders the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.
![]() ![]() |
Syntax
CanvasRenderingContext2D.strokeText(text, x, y, maxWidth);Parameters
- text [in]
-
Type: string
The text characters to paint on the canvas.
- x [in]
-
Type: number
The horizontal coordinate to start painting the text relative to the canvas.
- y [in]
-
Type: number
The vertical coordinate of the baseline for the text to start painting, relative to the canvas.
- maxWidth [in, optional]
-
Type: number
The maximum possible text width. If the value is less than width, the text is scaled to fit.
Return value
This method does not return a value.
Exceptions
| Exception | Condition |
|---|---|
|
The current font is not of the same origin or domain as the document that owns the canvas element. |
Standards information
- HTML Canvas 2D Context, Section 11
Remarks
strokeText can be used in conjunction with fillText to created filled and outlined text.
Examples
The following code example paints "Hello World" by using strokeText and fillText.
<head> <title>Stroke and Fill Text</title> <script type="text/javascript"> function draw() { var canvas = document.getElementById("MyCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"; ctx.strokeStyle = "blue"; // set stroke color to blue ctx.fillStyle = "red"; // set fill color to red ctx.lineWidth = "3"; // set stroke width to 3pmx var i; for (i = 0; i < 450; i += 45) { ctx.strokeText("Hello World", i, i); ctx.fillText("Hello World", i, i); } } } </script> </head> <body onload="draw();"> <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas> </body> </html>
See also

