Post
Ask Question

HTML5 Canvas For Beginners : Part 5

Introduction

 
IMAGEMAIN.png
  
Welcome back to my fifth and final article of HTML5 Canvas For Beginners series. Before reading this article you can go through my previous articles of this series, you can find them here:
In today's article we will learn all about text in a HTML5 Canvas.
 

HTML5 Canvas - Text

 
In HTML5 Canvas, we can draw text on a canvas using the "font" property and the "fillText()" method. We can set the size, style, font and color of HTML5 Canvas text. The font style can be one of the three types bold, normal or italic. By default, the font style property is set to normal. The "fillText()" method requires three parameters to draw; a string, a x position and a y position. We can use the fillStyle property to set text color by providing a color string, RGB value or hex value.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="600" height="500"></canvas>   
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.             ctx.font = 'bold 35pt Old English Text MT';  
  9.             ctx.fillStyle = 'White';  
  10.             ctx.fillText('Welcome to C# Corner!', 40, 150);  
  11.         </script>  
  12.     </div>  
  13.     </form>  
  14. </body> 
Output
 
1-TextbasicsImage.PNG
 

Text Stroke

 
In an HTML5 Canvas, we can use the "strokeStyle" property to set the stroke color of the canvas text by providing a color string, RGB value or hex value. After that, we can stroke the text using the "strokeText()" method. We can also set both the stroke and fill to HTML5 canvas text by using both the strokeText() and fillText() methods together. It's a good practice to use the strokeText() method after the fillText() method to render the thickness of the stroke correctly.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="600" height="500"></canvas>   
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.             var x = 80;  
  9.             var y = 110;   
  10.             ctx.font = 'italic 100pt Algerian';  
  11.             ctx.lineWidth = 3;  
  12.             // stroke color  
  13.             ctx.strokeStyle = 'White';  
  14.             ctx.strokeText('Canvas!', 10,200);             
  15.         </script>  
  16.     </div>  
  17.     </form>  
  18. </body> 
Output
 
2-TextStroke.PNG
 

Text Align

 
In a HTML5 Canvas, the "textAlign" property can be used to control the text alignment, it is nearly the same as a CSS "text-align" property that can be set to start, end, left, center or right.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="600" height="300"></canvas>   
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.             ctx.font = '80pt Bauhaus 93';  
  9.             ctx.textAlign = 'center';  
  10.             ctx.fillStyle = 'white';  
  11.             ctx.fillText('C# Corner', drawCanvas.width/2,drawCanvas.height/2);   
  12.         </script>  
  13.     </div>  
  14.     </form>  
  15. </body> 
Output
 
3-TextAlign.PNG
 

Text Baseline

 
In a HTML5 Canvas, "baseline" is little difficult to explain so it's necessary to understand the concept of a baseline. So I borrowed the following image from WHATWG  which explains many kinds of text baselines perfectly.  Here, you can observe how a text can be placed depending on those baselines.
 
baselines.png
 
In an HTML5 Canvas, the "textBaseline" property can be used to set the text alignment to vertical. The value for the textBaseline property can be set from one of the following: top, middle, hanging, ideographic, bottom and alphabetic. By default, the textBaseline property is set to alphabetic. Check this example, here I've drawn a line at y = 150 and I'm going to place every word at y = 150 but using a different "textBaseline". 
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.         <canvas id="drawCanvas" width="630" height="300"></canvas>  
  5.         <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');  
  8.             ctx.beginPath();  
  9.             ctx.moveTo(20, 150);         
  10.             ctx.lineTo(600, 150);      
  11.             ctx.stroke();                       
  12.   
  13.             ctx.font = 'bold 20pt Courier New';  
  14.             ctx.fillStyle = 'green';  
  15.             ctx.textBaseline = 'top';  
  16.             ctx.fillText('Top', 10, 150);  
  17.   
  18.             ctx.textBaseline = 'bottom';  
  19.             ctx.fillText('Bottom', 70, 150);  
  20.   
  21.             ctx.textBaseline = 'middle';  
  22.             ctx.fillText('Middle', 190, 150);  
  23.   
  24.             ctx.textBaseline = 'alphabetic';  
  25.             ctx.fillText('Alphabetic', 300, 150);  
  26.    
  27.             ctx.textBaseline = 'hanging';  
  28.             ctx.fillText('Hanging', 480, 150);  
  29.         </script>  
  30.     </div>  
  31.     </form>  
  32. </body> 
Output
 
333.PNG
 

Text Metrics

 
In an HTML5 Canvas text, the "measureText()" method gets the text metrics and it returns an object that contains a width property.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.     <div>  
  4.        <canvas id="drawCanvas" width="600" height="300"></canvas>  
  5.        <script>  
  6.             var drawCanvas = document.getElementById('drawCanvas');  
  7.             var ctx = drawCanvas.getContext('2d');          
  8.             var m = drawCanvas.width / 2;  
  9.             var n = drawCanvas.height / 2 - 10;  
  10.             var txt = 'c-sharpcorner.com';  
  11.    
  12.             ctx.font = 'bold 40pt Courier New';  
  13.             ctx.textAlign = 'center';  
  14.             ctx.fillStyle = 'white';  
  15.             ctx.fillText(txt, m, n);  
  16.             // get text metrics  
  17.             var metrics = ctx.measureText(txt);  
  18.             var w = metrics.width;  
  19.             ctx.font = '20pt Courier New';  
  20.             ctx.textAlign = 'center';  
  21.             ctx.fillStyle = '#333';  
  22.             ctx.fillText('(' + w + 'px wide)', m, n + 50);  
  23.         </script>  
  24.     </div>  
  25.     </form>  
  26. </body> 
Output
 
metrics.PNG
 

Text Wrap

 
In an HTML5 Canvas, text can be wrapped by creating a custom function that requires the following parameters:
  • thecanvas context
  • textstring
  • position
  • maximumwidth
  • heightof a line
This function must use the "measureText()" method that calculates when the next line will wrap.
 
Example
  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div>  
  4.             <canvas id="drawCanvas" width="600" height="300"></canvas>  
  5.             <script>  
  6.                 var textWrap = function (ctx, txt, m, n, maxW, lineH) {  
  7.                     var words = txt.split(' ');  
  8.                     var textLine = '';  
  9.                      for (var i = 0; i < words.length; i++) {  
  10.                         var lineTest = textLine + words[i] + ' ';  
  11.                         var metrics = ctx.measureText(lineTest);  
  12.                         var widthTest = metrics.width;  
  13.                         if (widthTest > maxW && i > 0) {  
  14.                             ctx.fillText(textLine, m, n);  
  15.                             textLine = words[i] + ' ';  
  16.                             n += lineH;  
  17.                         }  
  18.                         else {  
  19.                             textLine = lineTest;  
  20.                         }  
  21.                     }  
  22.                     ctx.fillText(textLine, m, n);  
  23.                 }   
  24.                 var drawCanvas = document.getElementById('drawCanvas');  
  25.                 var ctx = drawCanvas.getContext('2d');  
  26.                 var maxW = 500;  
  27.                 var lineH = 30;  
  28.                 var m = (drawCanvas.width - maxW) / 2;  
  29.                 var n = 80;  
  30.                 var txt = 'In HTML5 Canvas, text can be wrap by creating a custom function which requires the following parameters. This function have to use the measureText() method which calculate that when the next line is going to be wrap.';  
  31.                 ctx.font = '15pt Calibri';  
  32.                 ctx.fillStyle = '#333';   
  33.                 textWrap(ctx, txt, m, n, maxW, lineH);  
  34.             </script>  
  35.         </div>  
  36.     </form>  
  37. </body> 
Output
 
textWrap.PNG


Similar Articles