Text in HTML5 canvas

In this part of the HTML5 canvas tutorial, we will work with texts.

Text and fonts

A character is a symbol that represents an item such as a letter, a digit, or a punctuation. A glyph is a shape used to render a character or a sequence of characters. In the Latin alphabet a glyph typically represents one character. In other writing systems, a character may be composed of several glyphs, like ť, ž, ú, ô. These are Latin characters with accents.

Text can be drawn on the canvas using various fonts. A font is a set of type characters of a particular typeface design and size. Various typefaces include Helvetica, Georgia, Times, or Verdana. A collection of glyphs with a particular style form a font face. A collection of font faces forms a font family.

Drawing text

HTML5 canvas context has two methods for drawing text: strokeText() and fillText(). The difference is that the fillText() method draws the inside of the text, while the strokeText() method draws the outlines of the text.

drawing_text.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.font = "28px serif";
        ctx.fillText("ZetCode", 15, 25);
        
        ctx.font = "36px sans-serif";
        ctx.strokeText("ZetCode", 30, 80);
    }      
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="200" height="150">     
    </canvas>
</body>
</html> 

The example draws two strings on the canvas.

ctx.font = "28px serif";

The canvas context font property specifies the current text style being used when drawing text. We specify the font size and font family.

ctx.fillText("ZetCode", 15, 25);

The first parameter of the fillText() method is the text to be rendered. The next two parameters are the x and y coordinates of the text starting point.

Drawing text
Figure: Drawing text

Font

In the following example, we demonstrate several font properties.

text_font.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas drawing text</title>
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        ctx.font = "normal bold 18px serif";
        ctx.fillText('nice', 10, 20); 
        
        ctx.font = "italic 18px serif";
        ctx.fillText('pretty', 70, 20);
        
        ctx.font = "small-caps bolder 18px serif";
        ctx.fillText('beautiful', 160, 20);  
    }      
</script>
</head>

<body onload="draw();">
    <canvas id="myCanvas" width="350" height="150">     
    </canvas>
</body>
</html> 

The example draws three words with different font style, variant, and weight.

ctx.font = "normal bold 18px serif";

This line sets a normal font style and bold font weight.

ctx.font = "small-caps bolder 18px serif";

This line sets a small-caps font variant and bolder font weight.

Text font
Figure: Text font

Text baseline

The textBaseline property of the canvas 2D API specifies the current text baseline being used when drawing text. It accepts the following values: top, bottom, middle, alphabetic, hanging, ideographic. The default is alphabetic.

text_baseline.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text baseline</title>
<style>
    canvas {border: 1px solid #bbbbbb}
</style>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
    
        ctx.translate(0.5, 0.5);
        ctx.setLineDash([2]);
        
        ctx.fillStyle = 'gray';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(0, 100);
        ctx.lineTo(canvas.width, 100);
        ctx.stroke();
    
        ctx.font = '20px serif';
        ctx.textBaseline = "top";
        ctx.fillText('Top', 5, 100); 
        
        ctx.textBaseline = "bottom"; 
        ctx.fillText('Bottom', 60, 100); 
        
        ctx.textBaseline = "middle"; 
        ctx.fillText('Middle', 150, 100); 
        
        ctx.textBaseline = "alphabetic"; 
        ctx.fillText('Alphabetic', 240, 100); 
        
        ctx.textBaseline = "hanging"; 
        ctx.fillText('Hanging', 360, 100); 
        
        ctx.textBaseline = "ideographic";
        ctx.fillText('Ideographic', 460, 100);
        
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="600" height="200">
    </canvas>
</body>
</html>

The example draws strings using all available text baselines.

ctx.textBaseline = "top";
ctx.fillText('Top', 5, 100); 

These lines draw a text on the top baseline mode.

Text baseline
Figure: Text baseline

Text alignment

The textAlign property of the Canvas 2D API specifies the current text alignment being used when drawing text. The alignment is based on the x value of the fillText() method. Possible values are: left, right, center, start, and end.

text_alignment.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 canvas text alignment</title>
<style>
    canvas {border: 1px solid #bbbbbb}
</style>    
<script>
    function draw() {
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
    
        var cw = canvas.width/2;
    
        ctx.fillStyle = 'gray';
        ctx.translate(0.5, 0.5);
        ctx.setLineDash([2]);
        
        ctx.beginPath();
        ctx.moveTo(cw, 0);
        ctx.lineTo(cw, canvas.height);
        ctx.stroke();
        
        ctx.font = "16px serif";
        
        ctx.textAlign = "center";
        ctx.fillText("center", cw, 20);
        
        ctx.textAlign = "start";
        ctx.fillText("start", cw, 60);
        
        ctx.textAlign = "end";
        ctx.fillText("end", cw, 100);
        
        ctx.textAlign = "left";
        ctx.fillText("left", cw, 140);
        
        ctx.textAlign = "right";
        ctx.fillText("right", cw, 180);
    }    
</script>
</head>
    
<body onload="draw();">
    <canvas id="myCanvas" width="350" height="200">
    </canvas>
</body>
</html>

The example draws text with all available text alignments applied.

var cw = canvas.width/2;

We compute the x coordinate of the middle point of the canvas. Our text is aligned around this point.

ctx.beginPath();
ctx.moveTo(cw, 0);
ctx.lineTo(cw, canvas.height);
ctx.stroke();

For better visual understanding, we draw a thin vertical line in the middle of the canvas.

ctx.textAlign = "center";
ctx.fillText("center", cw, 20);

These lines center the text horizontally.

Text alignment
Figure: Text alignment

In this part of the HTML5 canvas tutorial, we covered text.