Post
Ask Question

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:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #textcanvas {  
  9.          border: 5px solid #9C9f93;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("textcanvas");  
  15.             var context = canvas.getContext("2d");  
  16.             context.fillStyle = "red";  
  17.             context.font = "bold 60pt monotype corsiva";  
  18.             context.fillText("Gaurav Gupta", 150, 100);  
  19.         };  
  20.     </script>  
  21.   </head>  
  22.   <body>  
  23.     <canvas id="textcanvas" width="600" height="200"></canvas>  
  24.   </body>  
  25. </html> 
Output
image 1.jpg
 

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:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #strokecanvas {  
  9.          border: 10px solid #9fff93;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.        window.onload = function(){  
  14.     var canvas = document.getElementById("strokecanvas");  
  15.     var context = canvas.getContext("2d");  
  16.     var x = 100;  
  17.     var y = 130;  
  18.     context.font = "80pt monotype corsiva";  
  19.     context.lineWidth = 3;  
  20.     context.strokeStyle = "green"; // stroke color  
  21.     context.strokeText("Gaurav Gupta", x, y);  
  22.         };  
  23.     </script>  
  24.   </head>  
  25.   <body>  
  26.     <canvas id="strokecanvas" width="800" height="200"></canvas>  
  27.   </body>  
  28. </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:
  1. <html>  
  2.   <head>  
  3.     <style>  
  4.       body {  
  5.         margin: 0px;  
  6.         padding: 0px;  
  7.       }  
  8.       #metricscanvas {  
  9.          border: 20px solid #9f0593;  
  10.       }  
  11.     </style>  
  12.     <script>  
  13.         window.onload = function () {  
  14.             var canvas = document.getElementById("metricscanvas");  
  15.             var context = canvas.getContext("2d");  
  16.             var x = canvas.width / 2;  
  17.             var y = canvas.height / 2 - 10;  
  18.             var text = "Gaurav Gupta!";  
  19.             context.font = "30pt monotype corsiva";  
  20.             context.textAlign = "center";  
  21.             context.fillStyle = "purple";  
  22.             context.fillText(text, x, y);  
  23.             // get text metrics  
  24.             var metrics = context.measureText(text);  
  25.             var width = metrics.width;  
  26.             context.font = "25pt calibri";  
  27.             context.textAlign = "center";  
  28.             context.fillStyle = "#555fff";  
  29.             context.fillText("(" + width + "px wide)", x, y + 40);  
  30.         };  
  31.     </script>  
  32.   </head>  
  33.   <body>  
  34.     <canvas id="metricscanvas" width="800" height="200"></canvas>  
  35.   </body>  
  36. </html> 
Output
image 3.jpg


Similar Articles