HTML5 Canvas: Text

To draw text using HTML5 Canvas, we have access to a few properties and methods such as the font property and the fillText() method of the canvas context. The font property of the canvas context is used to set the font style, size, and family. Similar to CSS, the style can be normal, italic, or bold.

After you set the font property, you can proceed to draw the text with the fillText() method. You can even apply a gradient fill for the text. We will take a look at some examples below.

font Property

The font property sets or returns the current font properties for text content on the canvas. This property uses the same syntax as the CSS font property.

context.font="font-style font-varient font-weight font-size font-family";

fillText() Method

The fillText() method draws filled text on the canvas. The default color of the text is black. We can use the font and fillstyle properties to customize the format of the text.

context.fillText(string,x,y,maxWidth);

Syntax

  context.font = 'bold 16px Arial';
  context.fillText(string, x, y, maxWidth);

Example

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #AAAAAA;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.font = 'bold 16px Arial';
    context.fillText('Hello World!', 70, 100);

    context.font = "24px Tahoma";
    var gradient = context.createLinearGradient(60, 0, 195, 0);
    gradient.addColorStop("0", "red");
    gradient.addColorStop("0.5", "orange");
    gradient.addColorStop("1.0", "blue");
    context.fillStyle = gradient;
    context.fillText("Hello World!", 60, 110);
</script>

textAlign Property

The textAlign property sets or returns the current alignment for text content, according to the starting value. Generally, the text will start in the position specified and paint to the left, but the textAlign property will place the text according to the alignment value.

context.textAlign="start|end|left|center|right";

Example

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle="#FFAA00";
    context.moveTo(200,20);
    context.lineTo(200,180);
    context.stroke();

    context.font = "24px Arial";
    context.textAlign = "start";
    context.fillText("Start", 200, 40);
    context.textAlign = "end";
    context.fillText("End", 200, 75);
    context.textAlign = "left";
    context.fillText("Left", 200, 110);
    context.textAlign = "center";
    context.fillText("Center", 200, 145);
    context.textAlign = "right";
    context.fillText("Right", 200, 180);
</script>

textBaseline Property

The textBaseline property sets or returns the current text baseline used when drawing text. Note that different browsers will interpret this property differently. The default value for this property is alphabetic.

context.textBaseline="alphabetic|bottom|hanging|ideographic|middle|top";

Example

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "#FFAA00";
    context.moveTo(20, 100);
    context.lineTo(580, 100);
    context.stroke();
    context.font = "24px Arial";

    context.textBaseline = "alphabetic";
    context.fillText("Alphabetic", 20, 100);
    context.textBaseline = "bottom";
    context.fillText("Bottom", 145, 100);
    context.textBaseline = "hanging";
    context.fillText("Hanging", 230, 100);
    context.textBaseline = "ideographic";
    context.fillText("Ideographic", 320, 100);
    context.textBaseline = "middle";
    context.fillText("Middle", 460, 100);
    context.textBaseline = "top";
    context.fillText("Top", 540, 100);
</script>

strokeText Method

The strokeText() method draws text on the canvas. The default color of the text is black. The strokeText() method adds no fill to the text. You can use a solid color or gradient fill for the outline of the text.

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

Example

<script>
    var canvas = document.getElementById("Canvas4");
    var context = canvas.getContext("2d");
    context.font = "36px Tahoma";
    var gradient = context.createLinearGradient(60, 0, 250, 0);
    gradient.addColorStop("0", "red");
    gradient.addColorStop("0.5", "orange");
    gradient.addColorStop("1.0", "blue");
    context.strokeStyle = gradient;
    context.strokeText("Hello World!", 60, 110);
</script>