A Practical look at the HTML5 Canvas Tag

Dipal Choksi
12y
11.4k
0
0
100
Article

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 which 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 gradiants

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 the 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 sport league website which 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!

Up Next

Ebook Download

View all

A Guide to Mastering HTML5 CSS3 and JavaScript

Read by 3 people

Download Now!

Learn

View all