Creating Infragistics Logo with HTML5 Canvas

Canvas is one of the key elements in HTML5 that makes it so attractive and an alternative to build RIA interfaces within the browser instead of having to require a use of a plug-in. The API is super simple to get started with the canvas element and once you master it, you can pretty much draw anything you want on it's surface. I like this cheat sheet and used it to build my demo below.

Before we get into the code, I want to highlight another alternative to do build rich UIs in HTML5, SVG. At some level, they do have their own benefits over each other but when it comes to basic functionality, you can use one or the other. It really would be a matter of choice. One key difference between the two is that SVG has more granular elements and is part of the DOM, so you can hook events to the shapes directly, whereas canvas is just one element and everything needs to be drawn on its surface by hand. 

In this post, we will use the HTML5 canvas context element and lineTo method to draw the new Infragistics logo. 

Disclaimer: I am not a designer and in no way claim design expertise, so please ignore my lack of any pixel perfection. 

First we need to put our canvas element on to the page. We can do that by simply using the new <canvas> tag and specify it’s dimensions along with an id. We can also embed some additional information inside of the tag which will be triggered automatically and displayed in case the browser doesn’t support HTML5 canvas. 

<canvas id="igLogo" width="280" height="250">
<b>This browser does not support HTML5 Canvas!</b>
</canvas>

Rest is all drawing using JavaScript canvas API. We can use the jQuery ready function to start our drawing process. First we get the canvas 2d context, set up the line properties, as we are going to draw the entire logo as a 50px wide line, then using the moveTo & lineTo method calls draw the entire logo. Since the logo has two round and two sharp edges, we will have to switch the lineJoin attribute and call the stroke method so that it draws as needed. Here is the entire JavaScript method with comments on what each individual snippet is responsible for. 

$(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();
});

Check out the running sample here, and you can do a browser view source to take a look at the source that is running behind the scenes.