Click here to Skip to main content
15,867,835 members
Articles / Web Development / HTML5
Article

Drawing Infragistics’ New Logo with the HTML5 Canvas

12 May 2011CPOL3 min read 23.5K   9  
Canvas is one of the principal new elements of HTML5, the next great Web markup language that lets you build Rich Internet Application user interfaces. In this short article, I’ll demonstrate how to use the HTML5 canvas to draw the new Infragistics logo.

This article is in the Product Showcase section for our sponsors at CodeProject. These articles are intended to provide you with information on products and services that we consider useful and of value to developers.

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.

image001.jpg

Figure 1.  The new IG logo drawn with the HTML5 canvas context element and lineTo method.

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>
Listing 1.  The HTML5 canvas element along with fallback content for browsers that do not support HTML5.

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. 

JavaScript
$(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();
});
Listing 2.  The JavaScript function for drawing the IG Logo onto the HTML5 canvas context.

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Product Manager Infragistics
United States United States
My name is Murtaza Abdeali, also known as Taz, I am the Product Manager for Web Clients at Infragistics. I manage our ASP.NET product line.

I started at Infragistics in 2004 as a Developer Support Engineer, where I enjoyed being at the fore front of all the product lines, talking directly to customers, answering questions, solving simple and complex problems.

Then I joined our Evangelism department as a Technical Evangelist, where I travelled all over the world visiting customers, speaking with them face to face, talking about the product and technologies around. During the same period, I also did some consulting and training gigs. This was the time where I got to see Infragistics customers actually using the product within their applications and being able to help with their problems in real time.

In my current role as a Product Manager, I still do all of the above, but I am also responsible for setting the direction for our ASP.NET product. So, if you want to discuss anything regarding the ASP.NET toolset, please feel free to contact me: murtazaa@infragistics.com

Comments and Discussions

 
-- There are no messages in this forum --