HTML 5

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!

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found