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.
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.
$(function () {
var canvas = document.getElementById("igLogo");
var CanvasContext = canvas.getContext("2d");
CanvasContext.lineWidth = 50;
CanvasContext.strokeStyle = "#00aeef";
CanvasContext.lineCap = "square";
CanvasContext.lineJoin = "round";
CanvasContext.moveTo(50, 50);
CanvasContext.lineTo(50, 51);
CanvasContext.moveTo(50, 130);
CanvasContext.lineTo(50, 200);
CanvasContext.lineTo(220, 200);
CanvasContext.lineJoin = "square";
CanvasContext.stroke();
CanvasContext.lineJoin = "round";
CanvasContext.lineTo(220, 50);
CanvasContext.lineTo(120, 50);
CanvasContext.lineJoin = "square";
CanvasContext.stroke();
CanvasContext.lineTo(120, 100);
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.