A Practical look at the HTML5 Canvas Tag

Introduction

In the first part of this article, we will take a practical look at the HTML5 Canvas tag and create a sample application to generate an image with selections specified by the user.

Definition

The canvas tag in HTML5 provides a canvas that is similar to a blank canvas in real life. You can draw on this canvas using Javascript.

What can it do?

The canvas offers you a broad set of features - you can literally compare it's features to a full-fledged drawing application.

Following is a list of the various things you can do :

Shapes: Lines, rectangles, paths, arcs, Bezier curves, quadratic curves
Effects: strokes, fill, shadows, linear gradients, radial gradients
Text
Pixel manipulation
Compositing: alpha, Composite operation
Transformations: scale, rotate, transformation matrix, translate
Image Drawing: load image, canvas, video elements and also allows encoding the image as a png.

Real-Life Usage

As interesting it is, to draw a rectangle and fill it with a gradient, what are the practical uses of the canvas?

The purpose of the canvas is to provide the ability to render graphics on the client-side using Javascript. The most obvious application is to provide dynamic images.

Here are some of the real-life situations where Canvas can be useful:

Charts/Graphs
Images created based on user preferences
Demonstrations of interesting scientific phenomena
User-friendly UI apps such as color selector
Render complex scenes
Optimized images
Animations
Special effects for text
Drawing applications

Sample Application

In this application, we will consider a sports league website that offers a feature to design your team logo. To scope the article sample, we allow the user to enter their team name, select a forecolor and a back-color.

On clicking the button, the canvas API is used within javascript to render a logo image, using the text and colors specified by the user.

For the sake of the demonstration, we draw a rectangular linear-gradient, combining the font color and the back color, render the background-color specified by the user, and finally the logo text using the color and text specified by the user.

Sample in Action

Image: Various logos generated by the application

Source Code (save as canvaslogo.htm)

<!DOCTYPE html>
<html>
<body>
<form name="logoform">
<table border=0>
<tr>
<td>Team Name (up to 7 characters) </td>
<td>
<input type="text" id="teamname" maxlength=7/>
</td>
</tr>
<tr>
<td>Font color</td>
<td>
<input type="color" id="teamfcolor"/>
</td>
</tr>
<tr>
<td> Backcolor</td>
<td>
<input type="Color" id="teambcolor"/>
</td>
</tr>
<tr>
<td colspan=2>
<input type="button" value="Preview Logo" onclick="PreviewLogo();"/>
</td>
</tr>
</table>
<br/>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
<canvas>
<script type="text/javascript">
function PreviewLogo()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle = logoform.teambcolor.value;
ctx.fillRect(0, 0, 200, 100);
ctx.font = "40pt Arial";
ctx.fillStyle = logoform.teamfcolor.value;
ctx.fillText(logoform.teamname.value, 25, 60);
var grd=ctx.createLinearGradient(0,0,25,100);
grd.addColorStop(0,logoform.teamfcolor.value);
grd.addColorStop(1,logoform.teambcolor.value);
ctx.fillStyle=grd;
ctx.fillRect(0,0,25,100);
}
</script>
</form>
</body>
</html>

Conclusion

In this article, we took a look at the Canvas element in HTML5 from a practical point of view. I hope this gives a good demonstration of how the canvas API can be used to create custom images at run time, combining the application logic along with the user's preferences.

Happy Coding!