fillText method

Renders filled text to the canvas by using the current fill style and font.

HTML Canvas 2D Context, Section 11Internet Explorer 9



CanvasRenderingContext2D.fillText(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 at, relative to the canvas.

y [in]

Type: number

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

maxWidth [in, optional]

Type: number

The maximum possible text width. If the value is less than the width property, 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


The following code example paints text that is filled with a linear gradient.

  <title>Fill Text Test</title>
  <script type="text/javascript">
      function draw() {
          var canvas = document.getElementById("MyCanvas");
          if (canvas.getContext) {
              var ctx = canvas.getContext("2d");
              gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
              // Add the colors with fixed stops at 1/4 of the width.
              gradient.addColorStop("0", "magenta");
              gradient.addColorStop(".25", "blue");
              gradient.addColorStop(".50", "green");
              gradient.addColorStop(".75", "yellow");
              gradient.addColorStop("1.0", "red");

              // Use the gradient.
              ctx.font = "italic 200 36px/2 Unknown Font, sans-serif"
              ctx.fillStyle = gradient;
              var i;
              for (i = 0; i < 450; i += 50) {
                  ctx.fillText("Hello World", i, i);
<body onload="draw();">
  <canvas id="MyCanvas" width="600" height="500">Canvas not supported in this mode or browser.</canvas>

See also