Working With Text in Canvas Using HTML5

Introduction

In this article, we will discuss the various text formatting styles in the HTML5 canvas. The HTML5 canvas provides capabilities to create text using various properties. We will describe the various properties of text that can be applied to the text on the canvas. We can set the font style, text color, text-align, etc.

There are many properties that we can set for text in an HTML5 canvas.

Font, size, style
Text color
Text Align
Text Baseline
Text Metrics
Text Stroke

In this section, we will discuss each of the properties of the text.

Font

In the font property of the text we include many attributes like style (Bold, italic, normal), Color and size of the text. Example: In this example, we apply these properties to the text in a canvas.

Here is code:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#textcanvas {
border: 5px solid #9C9f93;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("textcanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.font = "bold 60pt monotype corsiva";
context.fillText("Gaurav Gupta", 150, 100);
};
</script>
</head>
<body>
<canvas id="textcanvas" width="600" height="200"></canvas>
</body>
</html>

Output

Test Stroke

The stroke properties of the text determine the thickness of the text. We use the fillText() and strokeText() methods so that it will render the thickness of text correctly. Example: In this example, we apply the stroke Style property of the canvas context and the strokeText() method.

Here is code:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#strokecanvas {
border: 10px solid #9fff93;
}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("strokecanvas");
var context = canvas.getContext("2d");
var x = 100;
var y = 130;
context.font = "80pt monotype corsiva";
context.lineWidth = 3;
context.strokeStyle = "green"; // stroke color
context.strokeText("Gaurav Gupta", x, y);
};
</script>
</head>
<body>
<canvas id="strokecanvas" width="800" height="200"></canvas>
</body>
</html>

Output

Text Metrics

Here we use another property of text. Text Metrics is used to get the text metrics of The HTML5 canvas text. This property returns only the width of the text, not the height of the text. We use the measureText() method of the canvas context. Example: In this example, we get the width of text in a canvas.

Here is code:

<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#metricscanvas {
border: 20px solid #9f0593;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById("metricscanvas");
var context = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = "Gaurav Gupta!";
context.font = "30pt monotype corsiva";
context.textAlign = "center";
context.fillStyle = "purple";
context.fillText(text, x, y);
// get text metrics
var metrics = context.measureText(text);
var width = metrics.width;
context.font = "25pt calibri";
context.textAlign = "center";
context.fillStyle = "#555fff";
context.fillText("(" + width + "px wide)", x, y + 40);
};
</script>
</head>
<body>
<canvas id="metricscanvas" width="800" height="200"></canvas>
</body>
</html>

Output