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 on the text in canvas. We can set the font style, text color, text align etc.
There are many properties that we can set for text in a 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 text.
Font: In the font property of text we include many attributes like style (Bold, italic, normal), Color and size of text.
Example: In this example we apply these properties on 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
![image 1.jpg]()
Test Stroke: 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
![image 2.jpg]()
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
![image 3.jpg]()