HTML5 Canvas Tutorial: text

Canvas text

In order to place text on an HTML5 canvas we use the font property of the canvas context .

context.font=[value];

Example 1: Placing text on the Canvas. See image 1.

<!doctype html>
<html>
<head>
<script> 
 window.onload = function(){
    var canvas = document.getElementById("text");
    var context = canvas.getContext("2d");
 
    var x = 50;
    var y = 80;
    context.font = "30pt Arial";
    context.fillText("Hoi Piepeloi!", x, y);
};</script>
</head>
<body>	
	<canvas id="text" style="border: 1px solid;" width="400" height="300"></canvas>
</body>
</html>
Canvas tekst
Image 1. Canvas met tekst

Check this example in your browser

Setting the text color

To set the color of the canvas text we can use the fill style property of the canvas context.

context.fillStyle=[value];

Example 2: Setting the text color of the canvas text.

<!doctype html>
<html>
<head>
<script> 
window.onload = function(){
    var canvas = document.getElementById("text");
    var context = canvas.getContext("2d");
 
    var x = 150;
    var y = 100;
    context.font = "50pt Arial";
    context.fillStyle = "#f16529"; // tekstkleur rood
    context.fillText("Hoi Piepeloi!", x, y);
   
};
</script>
</head>
<body>	
	<canvas id="text" style="border: 1px solid;" width="400" height="300"></canvas>
</body>
</html>

Canvas metr gekleurde tekst
Image 2. Canvas with colored text

Check this example in your browser

Text outline

To provide the text of an outline (stroke), we can use the stroke style and stroke text () methods of the canvas context.

context.strokeStyle=[value];
context.strokeText("Hoi Piepeloi!", x, y);

Example 3: Setting the outline of the canvas text.

<!doctype html>
<html>
<head>
<script> 
 window.onload = function(){
    var canvas = document.getElementById("text");
    var context = canvas.getContext("2d");
 
    var x = 30;
    var y = 70;
    context.font = "40pt Arial";
 
    context.lineWidth = 2;
    context.strokeStyle = "red"; // stroke color
    context.strokeText("Hoi Piepeloi!", x, y);
};
   
</script>
</head>
<body>	
	<canvas id="text" style="border: 1px solid;" width="400" height="300"></canvas>
</body>
</html>

Canvas met omlijnde tekst
Image 3. Canvas with outlined text

Check this example in your browser

If you want to apply both a filling as a stroke on canvas text then you need to apply both the Fill text() and the stroke text() methods. In this case, first apply the Fill text() method, and then the stroke text() , otherwise the line thickness is not displayed correctly on the screen.

Aligning text

To make the text horizontal and vertical aligned , we can use (horizontal) the textAlign() and (vertical) the text baseline() method of the canvas context

context.textAlign=[value];
context.textBaseline=[value];

Example 4: Canvas with aligned text

<!doctype html>
<html>
<head>
<script> 
<!doctype html>
<html>
<head>
<title>Uitlijnen canvas tekst</title>
<script> 

window.onload = function(){
var canvas = document.getElementById("text");
var context = canvas.getContext("2d");

var x = canvas.width / 2;
var y = canvas.height / 2;

// textAlign lijnt de tekst horizontaal uit, relatief aan de plaats van de tekst.
context.textAlign = "center";

// textBaseline lijnt de tekst vertikaal uit relatief aan de font style 
context.textBaseline = "middle";

context.font = "30pt Arial";
context.fillStyle = "#f16529"; // tekstkleur rood
context.fillText("Hoi Piepeloi!", x, y);
};

</script>

<body>	
	<canvas id="text" style="border: 1px solid;" width="400" height="200"></canvas>
</body>
</html>

Canvas met uitgelijnde tekst
Image 4. Canvas with aligned text

Check this example in your browser

The canvas text is by default not aligned relative to the dimensions of the canvas, but relative to the position of the text (horizontal) and the font height (vertical). Would we in the above javascript code for the variable x and y fill in the values var x = 0 and var y = 0 , then the canvas would look as follows on the screen (See image 5), which is probably not what you intended.

Canvas met uitgelijnde tekst met tekstposionering in de (0,0)
Image 5. Canvas with aligned text with text positioning in (0,0)

Check this example in your browser

Next tutorial

Leave a comment