Did you find this useful?
Socialize it today.


HTML5 Canvas: Text

Wednesday, October 24, 2012

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);

ParameterDescription
stringSpecifies the text that will be written
xSpecifies the x coordinate to start writing text
ySpecifies the y coordinate to start writing text
maxWidthOptional value specifies maximum allowed width of text

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>

Your browser does not support the HTML5 canvas tag.

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>

Your browser does not support the HTML5 canvas tag.

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>

Your browser does not support the HTML5 canvas tag.

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>

Your browser does not support the HTML5 canvas tag.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

The Definitive Guide to HTML5 HTML CSS and JavaScript HTML5: The Missing Manual