Canvas Text Wrapping Using HTML 5

Deepak Dwij
Apr 08, 2012
16k
0
0
Article

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

This is where we will create the 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 Web form
Rename it to Canvaswraptext.aspx

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

<style>
body
{
  margin: 0px;
  padding: 0px;
}
Canvas
{
   border: 2px solid #9C9898;
   margin-top: 50px;
   margin-left: 50px;
   background-color: #F4D19F;
   box-shadow: 5px 5px 8px #222;
}
.title
{
   text-align: center;
   font-family: Segoe UI Light, Arial, Helvetica;
   font-size: 2.2em;
   margin: 1em;
}
.info
{
   text-align: center;
   font-family: Segoe UI Light, Arial, Helvetica;
   font-size: 1.2em;
   margin: 0.25em;
}
</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:

function wrapText(context, text, x, y, maxWidth, lineHeight)
{

var words = text.split(" ");

var line = "";

for (var n = 0; n < words.length; n++)
{

var testLine = line + words[n] + " ";

var metrics = context.measureText(testLine);

var testWidth = metrics.width;

if (testWidth > maxWidth) {

context.fillText(line, x, y);

line = words[n] + " ";

y += lineHeight;

}

else {

line = testLine;

}

context.fillText(line, x, y);

}

window.onload = function () {

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

var maxWidth = 400;

var lineHeight = 25;

var x = (canvas.width - maxWidth) / 2;

var y = 60;

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";

context.font = "16pt Calibri";

context.fillStyle = "#333";

wrapText(context, text, x, y, maxWidth, lineHeight);

};

</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.

<h1>

Canvas Wrapping Text Representation

</h1>

</center>

<hr />

</canvas>

</body>

Step 5 : The complete code for the CanvasWrapTextApp application:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvaswraptext.aspx.cs" Inherits="CanvasWrapTextApp._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<style>

</style>

</script>

</head>