Post
Ask Question

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
 
html5can1.jpg
 
html5can2.jpg
Image: Various logos generated by the application 
 
Source Code (save as canvaslogo.htm)
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <body>  
  4.         <form name="logoform">  
  5.             <table border=0>  
  6.                 <tr>  
  7.                     <td>Team Name (up to 7 characters) </td>  
  8.                     <td>  
  9.                         <input type="text" id="teamname" maxlength=7/>  
  10.                     </td>  
  11.                 </tr>  
  12.                 <tr>  
  13.                     <td>Font color</td>  
  14.                     <td>  
  15.                         <input type="color" id="teamfcolor"/>  
  16.                     </td>  
  17.                 </tr>  
  18.                 <tr>  
  19.                     <td> Backcolor</td>  
  20.                     <td>  
  21.                         <input type="Color" id="teambcolor"/>  
  22.                     </td>  
  23.                 </tr>  
  24.                 <tr>  
  25.                     <td colspan=2>  
  26.                         <input type="button" value="Preview Logo" onclick="PreviewLogo();"/>  
  27.                     </td>  
  28.                 </tr>  
  29.             </table>  
  30.             <br/>  
  31.             <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">  
  32. Your browser does not support the canvas element.   
  33.                 <canvas>  
  34.                     <script type="text/javascript">  
  35. function PreviewLogo()  
  36. {  
  37. var c=document.getElementById("myCanvas");  
  38. var ctx=c.getContext("2d");  
  39. ctx.fillStyle = logoform.teambcolor.value;  
  40. ctx.fillRect(0, 0, 200, 100);  
  41. ctx.font = "40pt Arial";  
  42. ctx.fillStyle = logoform.teamfcolor.value;  
  43. ctx.fillText(logoform.teamname.value, 25, 60);  
  44. var grd=ctx.createLinearGradient(0,0,25,100);  
  45. grd.addColorStop(0,logoform.teamfcolor.value);  
  46. grd.addColorStop(1,logoform.teambcolor.value);  
  47. ctx.fillStyle=grd;  
  48. ctx.fillRect(0,0,25,100);  
  49. }  
  50. </script>  
  51.                 </form>  
  52.             </body>  
  53.         </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!


Similar Articles