Creating Infragistics Logo with HTML5 Canvas

[Infragistics] Murtaza Abdeali / Monday, May 2, 2011

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. 

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. 

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.