This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

strokeText

Summary

Renders the given text at the given (x, y) coordinates, ensuring that the text isn’t wider than maxWidth (if specified), using the current font, textAlign, and textBaseline values.

Method of apis/canvas/CanvasRenderingContext2Dapis/canvas/CanvasRenderingContext2D

Syntax

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

Parameters

text

Data-type
String

The text characters to paint on the canvas.

x

Data-type
Number

The horizontal coordinate to start painting the text relative to the canvas.

y

Data-type
Number

The vertical coordinate of the baseline for the text to start painting, relative to the canvas.

maxWidth

Data-type
Number

(Optional)

The maximum possible text width. If the value is less than width, the text is scaled to fit.

Return Value

No return value

Examples

Short example of drawing an outline text

ctx.strokeStyle = 'white';
ctx.strokeText("Hello World!", canvas.width/2, canvas.height/2, maxWidth);

Full example of drawing an outline text

<!DOCTYPE html>
<html>
<head>
  <title>Canvas Example</title>
  <script>
    function draw() {
      var canvas = document.getElementById("MyCanvas");
      if (canvas.getContext) {  // check for support
        var ctx = canvas.getContext("2d");

        // clear background
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // draw text
        var text = "Hello World!";
        ctx.font = '3em Arial';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'center';
        ctx.fillStyle = 'none';
        ctx.strokeStyle = 'white';
        // draw Hello World
        ctx.strokeText(text, canvas.width/2, canvas.height/2, canvas.width, canvas.height);

      }
    }
  </script>
</head>
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">This browser or document mode doesn't support canvas</canvas>
</body>
</html>

Related specifications

W3C HTML Canvas 2D Specification
W3C Candidate Recommendation

Attributions