strokeText method

Renders the specified text at the specified position by using the current font, lineWidth, and strokeStyle property.

HTML Canvas 2D Context, Section 11Internet Explorer 9



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


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.



The current font is not of the same origin or domain as the document that owns the canvas element.


Standards information


strokeText can be used in conjunction with fillText to created filled and outlined text.


The following code example paints "Hello World" by using strokeText and fillText.

  <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);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500" border="1">Canvas not supported in this mode or browser.</canvas>

See also