Drawing Infragistics’ New Logo with the HTML5 Canvas

Canvas is one of the new key elements in HTML5 that makes it so attractive as an alternative to build RIA interfaces within the browser instead of having to require a use of a plug-in, that it’s something you just have to learn. The API between JavaScript and HTML5 is super simple to get started with.  Once you master the canvas element, you can pretty much draw anything you want on it's surface.  I like this cheat sheet and used it when building my demo below. Infragistics recently unveiled its open and innovative new IG logo design to represent all of their products, like the NetAdvantage® Ultimate user interface control toolset for .NET developers, and Quince Pro™ design review tool based in the cloud. I thought this new logo would make the ideal candidate for getting started with HTML5 and its canvas context element.  If your company has its own cool logo, you can practice drawing it on an HTML5 canvas element.

Before I get into the code, I want to highlight another alternative to build rich UIs in HTML5, and that’s Scalar Vector Graphics (SVG). At some level, SVG has its own benefits over HTML5, but when it comes to basic drawing functionality, you can use either one. One key difference between the two for more complex illustrations, is that SVG has much more granular elements and is part of the DOM, so you can hook events to its shapes directly, whereas canvas is just one element and everything needs to be drawn onto its surface by hand.

First you need to put your canvas element onto the page. You can do that by simply using the new <canvas> tag, and specifying its dimensions along with an id attribute. You can also embed some additional information inside of the tag which will be displayed when the browser doesn’t support the HTML5 canvas element, so you could perhaps alternatively load a raster image of the IG logo for users with older browsers to see.

<canvas id="igLogo" width="280" height="250">
   <img src="http://www.infragistics.com/App_Themes/Global/images/logo.gif" />
</canvas>

The rest is all drawing using the JavaScript canvas API. You can use the jQuery ready function to start the drawing process. First you get the canvas “2d” context, set up the line properties, and as you are going to draw the entire  IG logo in a line that is 50px thick, using the moveTo & lineTo method calls draw the entire logo.  Since the IG logo has two round and two sharp edges, I had to switch to using the lineJoin attribute, and calling the stroke method so that it draws these corners properly. Here is the entire JavaScript method for you to see for yourself,  with comments on what each individual snippet was responsible for drawing. 

$(function () {
            //Grab the canvas element on the client 
            // and get the context to add stuff to the canvas
            var canvas = document.getElementById("igLogo");
            var CanvasContext = canvas.getContext("2d");
 
            //Since we are going to use the line 
            // to draw the entire logo, set up
            // some properties to get the right width
            // color, the cap and join style 
            CanvasContext.lineWidth = 50;
            CanvasContext.strokeStyle = "#00aeef";
            CanvasContext.lineCap = "square";
            CanvasContext.lineJoin = "round";  
 
            //Through out our drawing process we will just
            // call the moveTo method in case we want draw 
            // things that do not connect, and just call the
            // lineTo so that the drawing operation takes place
            // when we call the stroke method
 
            //Draw the "i" dot
            CanvasContext.moveTo(50, 50);
            CanvasContext.lineTo(50, 51);
 
            //Draw line on the left
            CanvasContext.moveTo(50, 130);
            CanvasContext.lineTo(50, 200);
 
            //Draw the base line
            CanvasContext.lineTo(220, 200);
 
            //Change the line join to get a square edge
            // at the bottom right and then switch back to round
            CanvasContext.lineJoin = "square";
            CanvasContext.stroke();
            CanvasContext.lineJoin = "round";
 
            //Draw line on the right
            CanvasContext.lineTo(220, 50);
 
            //Draw the top line
            CanvasContext.lineTo(120, 50);
 
            //Change the line join to get a square edge
            // at the top left
            CanvasContext.lineJoin = "square";
            CanvasContext.stroke();
 
            //Draw the "G" edge
            CanvasContext.lineTo(120, 100);
 
            //Finally, call the stroke method so that 
            // all the remaining drawing can be completed
            CanvasContext.stroke();
});

Please check out the running sample here, where you can view source within the browser to take a look at the source that is running behind the scenes.  Then if you’re curious about the company behind this new IG logo, visit the Infragistics website to explore all of their great products for .NET developers.

Copyright 2011 Infragistics, Inc. All rights reserved. Infragistics and NetAdvantage are registered trademarks of Infragistics, Inc. The Infragistics logo and Quince Pro are trademarks of Infragistics, Inc.