Post
Ask Question

Canvas Text Wrapping Using HTML 5

Introduction

 
This article shows how to wrap text using the HTML 5 canvas tag; we can create a custom function that requires the canvas context, a text string, a position, a max-width, and a line-height. The function should use the measureText() method of the canvas context to calculate when the next line should wrap.
 
Here we will use some JavaScript and some styles along with HTML code. Just go through the steps to see how to create this application. Let's see how the CanvasWrapTextApp application can be created. To do so use the following steps.
 
Step 1 : Open a HTML editor or Visual Studio.  Open File menu ->select new ->Choose Website
 
0000.jpg
 
This is where we will create an HTML5 application.    
  • Go to Solution Explorer
  • Right-click on the Application name
  • Select Add-->add new item
  • Now in the window that opens, select an HTML page or new Webform
  • Rename it to Canvaswraptext.aspx
wrap1.gif
 
Step 2: In this section, we will create the style for the media and create the .css on the media screen. Put the given script in the Head section of the HTML or between the <head>--</head> tags. Here the CSS is used for design purposes.
 
CSS Script 
  1. <style>  
  2. body  
  3. {  
  4.   margin: 0px;  
  5.   padding: 0px;  
  6. }  
  7. Canvas  
  8. {  
  9.    border: 2px solid #9C9898;  
  10.    margin-top: 50px;  
  11.    margin-left: 50px;  
  12.    background-color: #F4D19F;  
  13.    box-shadow: 5px 5px 8px #222;  
  14.  }  
  15. .title  
  16. {  
  17.    text-align: center;  
  18.    font-family: Segoe UI Light, Arial, Helvetica;  
  19.    font-size: 2.2em;  
  20.    margin: 1em;  
  21. }  
  22. .info  
  23. {  
  24.    text-align: center;  
  25.    font-family: Segoe UI Light, Arial, Helvetica;  
  26.    font-size: 1.2em;  
  27.    margin: 0.25em;  
  28. }  
  29. </style>  
Step 3: In this part, we need to work on some JavaScript. To fully understand how JavaScript works, download the attached .rar file and run the CanvasWrapTextApp application.
 
The whole JavaScript looks as in the following:
  1. <script>  
  2.         function wrapText(context, text, x, y, maxWidth, lineHeight)   
  3.         {  
  4.             var words = text.split(" ");  
  5.             var line = "";  
  6.              for (var n = 0; n < words.length; n++)   
  7.              {  
  8.                 var testLine = line + words[n] + " ";  
  9.                 var metrics = context.measureText(testLine);  
  10.                 var testWidth = metrics.width;  
  11.                 if (testWidth > maxWidth) {  
  12.                     context.fillText(line, x, y);  
  13.                     line = words[n] + " ";  
  14.                     y += lineHeight;  
  15.                 }  
  16.                 else {  
  17.                     line = testLine;  
  18.                 }  
  19.             }  
  20.             context.fillText(line, x, y);  
  21.         }  
  22.          window.onload = function () {  
  23.             var canvas = document.getElementById("myCanvas");  
  24.             var context = canvas.getContext("2d");  
  25.             var maxWidth = 400;  
  26.             var lineHeight = 25;  
  27.             var x = (canvas.width - maxWidth) / 2;  
  28.             var y = 60;  
  29.             var text = "Mahesh is the founder of C# Corner and Mindcracker Network, 7-times Microsoft MVP and author of several .NET programming books. In his day to day work, Mahesh is a Senior Software Consultant with over 14 years of IT industry experience building systems for Financial and Banking, Engineering & Architectural, Imaging, Construction, Biological & Pharmaceuticals, Healthcare and Education industries";  
  30.             context.font = "16pt Calibri";  
  31.             context.fillStyle = "#333";  
  32.             wrapText(context, text, x, y, maxWidth, lineHeight);  
  33.         };  
  34. </script>  
Step 4: In this section, we are going to become familiar with the body part of HTML scripting. Replace this script from the body section of the Canvaswraptext.aspx page. Here we pass a Canvas in the canvas tag. 
  1. <body style="background-color: #C9E0E6">  
  2.     <center>  
  3.         <h1>  
  4.             Canvas Wrapping Text Representation  
  5.         </h1>  
  6.     </center>  
  7.     <hr />  
  8.     <canvas id="myCanvas" width="578" height="300">  
  9.         </canvas>  
  10. </body>  
Step 5 : The complete code for the CanvasWrapTextApp application:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvaswraptext.aspx.cs" Inherits="CanvasWrapTextApp._Default" %>  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <style>  
  6.     </style>  
  7.     <script>  
  8.     </script>  
  9. </head>  
  10. <body style="background-color: #C9E0E6">  
  11.     <center>  
  12.         <h1>  
  13.             Canvas Wrapping Text Representation  
  14.         </h1>  
  15.     </center>  
  16.     <hr />  
  17.     <canvas id="myCanvas" width="578" height="300">  
  18.         </canvas>  
  19. </body>  
  20. </html>  
Step 6: Output Press F5
 
Note: For the accurate output of HTML5 applications, you must have the Google Chrome browser on your PC. The function should use the measureText() method of the canvas context to calculate when the next line should wrap while running the application in the browser. 
 
wrap.gif
 
Here are some useful resources


Similar Articles