Create great graphics with the HTML5 canvasNew features help you create from simple figures to awesomeanimation

Skill Level: Intermediate

Ken Bluttman (kb@kgadesigns.com)Web DeveloperKGA Designs

08 Feb 2011

Enhance your web pages with Canvas, a simple HTML5 element that packs a punch.Entice visitors to your site over and over again by taking advantage of its flexibilityand variety.

HTML5 is an emerging standard that is taking over the tried-and-true HTML4 at anincreasing rate. HTML5 is a W3C "working draft"—which means that it's still beingdeveloped—that contains a rich set of elements and attributes that support thecurrent HTML version 4.01 specification. It also introduces several new elementsand attributes that apply to many areas of web page use—audio, video, graphics,data storage, content presentation, and more. This article focuses on the graphicsupdate: the canvas.

The new HTML5 canvas is a native HTML drawing pad that is used with JavaScriptcode and doesn't use third-party tools. Full HTML5 support is not complete across allweb browsers, but within the emerging support, the canvas is already running wellon all modern browsers except Windows® Internet Explorer®. Luckily, a solution hasemerged to bring Internet Explorer into line.

The canvas element is basically a blank slate until you "paint" something visual on it.Instead of an artist's array of brushes, you have at your disposal different methods todraw on the canvas. You can even create and manipulate animation on the canvas,which is not something you can do with brushes and oils.

This article explores the new HTML5 canvas element. It takes a step-by-step

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 1 of 21

approach from the simple inclusion of the canvas element to advanced JavaScriptinteraction (the key to animation). Learn to present the canvas on a web page. Thisarticle is written for web designers and developers, and although knowledge ofJavaScript is not mandatory, it is helpful to understand how the language functions.Knowledge of HTML, however, is key, especially how to create a basic web page.

To view live instances of the examples shown in this article, you need a browser andaccess to the Internet. All examples are provided on a live website (see Resources).

Browser support

Determining which browsers support HTML5 and to what extent is a moving target.At the time this article was written, Google Chrome, Apple Safari, and Mozilla Firefoxall support most of the new HTML5 elements, and all support the canvas element.Internet Explorer does not support HTML5 in Internet Explorer 7 or 8; InternetExplorer 9 is in beta testing and supports HTML5, though with some problems.

In the meantime, a fix for non-HTML5 versions of Internet Explorer is available. Thebasic premise of the fix is to simply create the element using JavaScript code. Forexample, you can create a recognizable Canvas tag with the snippetdocument.createElement('canvas'); however, this does not imply anythingpast the element itself. A popular workaround is to include an entire canvas-basedJavaScript library that is supplied by Google called the ExplorerCanvas—orexcanvas, for short. Download and reference it as an external file, as shown below.(See Resources for links to more extensive information about excanvas.)

<!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]-->

By including excanvas, you provide Internet Explorer with the canvas and most ofits methods.

Creating your first canvas

Because the canvas is nothing more than an HTML tag, it is displayed simply by itsinclusion in the markup. The first example, shown in Figure 1, displays a canvas inits simplest form. It is visible only because it is given a color scheme via the styleattribute and a size via the width and height attributes.

Figure 1. A blank canvas

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 2 of 21

The code of this page is short and succinct, as shown in Listing 1.

Listing 1. HTML for a web page with a canvas

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"src="excanvas.js"></script><![endif]--></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400"

style="background-color:blue;border: 10px yellowsolid"></canvas><br /><br /><a href="index.html">back</a>

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 3 of 21

</div></body></html>

The canvas has a width and height of 400 pixels each, along with a yellow borderand a blue background. No actual drawing has been put on the canvas; thathappens with the JavaScript methods that belong to the canvas.

Canvas methods

Table 1 lists several methods that are appended to the context of the canvas.

Table 1. Canvas methodsMethod Use

getContext(contextId) Exposes the API necessary to draw on thecanvas. The only (currently) availablecontextID is 2d.

height Sets the height of the canvas. The default is 150pixels.

width Sets the width of the canvas. The default is 300pixels.

createLinearGradient(x1,y1,x2,y2) Creates a linear gradient. The start coordinate isset with x1,y1 and the end coordinate withx2,y2.

createRadialGradient(x1,y1,r1,x2,y2,r2)Creates a radial gradient. The start of the circlebegins at coordinate x1,y1 with a radius r1.The end of the circle is at coordinate x2,y2 witha radius r2.

addColorStop(offset, color) Adds a color stop to a gradient. A color stop is aposition in the gradient where a color changeoccurs. The offset must be between 0 and 1.

fillStyle Sets the color used for filling an area—forexample, fillStyle='rgb(255,0,0)'.

strokeStyle Sets the color used for drawing a line—forexample, fillStyle='rgb(255,0,0)'.

fillRect(x,y,w,h) Fills a rectangle positioned at x and y, with awidth and height of w and h.

strokeRect(x,y,w,h) Draws the outline of a rectangle positioned at xand y, with a width and height of w and h.

moveTo(x,y) Moves the drawing position to coordinate x,y.

lineTo(x,y) Draws a line to position to x,y from the lastposition at which the drawing method ended.

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 4 of 21

Building canvas applications with increased sophistication

This section presents a sequence of examples, each with a bit more functionality.

A deeper visual experience

First, place a set of rectangles on the canvas. Remember that a rectangle is anyshape that has four straight sides and right angles, and that a square is a variation ofa rectangle. Figure 2 shows a series of rectangles on the canvas, each smaller thanthe last. Notice that each rectangle has a different color, making each clear anddistinct.

Figure 2. A canvas filled with rectangles

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 5 of 21

Listing 2 shows the code used to create the canvas in Figure 2. Two lines of codecreate each rectangle: First, the fillStyle method defines the color using the red,blue, green (RGB) format for color definition (fillStyle='rgb(255,0,0)). Then,the fillRect method (fillRect(50,50,300,300)) defines the size. The firsttwo values set the starting coordinates; the last two set the ending coordinates.

Listing 2. Using JavaScript code to create the context and use variousmethods

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]--><script>window.onload=function() {

var mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');mycontext.fillStyle='rgb(0,0,255)';mycontext.fillRect(0,0,400,400);mycontext.fillStyle='rgb(255,0,0)';mycontext.fillRect(50,50,300,300);mycontext.fillStyle='rgb(0,255,0)';mycontext.fillRect(100,100,200,200);mycontext.fillStyle='rgb(100,100,100)';mycontext.fillRect(125,175,150,25);

}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400"style="border: 10px yellow solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

To draw on the canvas, access the API that provides the methods by applyinggetContext('2d') to the canvas element. The canvas element is set to aJavaScript variable using this document.getElementById method:

var mycanvas=document.getElementById("myCanvasTag");

Then apply getContext to the canvas element variable, as shown below.

var mycontext=mycanvas.getContext('2d');

Once a variable is set to the context, all the methods are ready for use.

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 6 of 21

The next example shows how to combine two techniques. One is the overlapping ofrectangles, which is done using the fillRect parameters to position the rectangles(see Figure 3).

Figure 3. Applying transparency to rectangles on a canvas

The second technique is the variation of RGB color treatment, which addstransparency. Instead of using rgb, use rgba. The a indicates the alpha channel,which manipulates transparency. In the example in Figure 3, the second rectangle isset to 50% (or .5) transparency, and the third is set to 25% (or .25). Listing 3 showsthe full markup.

Listing 3. Using transparency

<!DOCTYPE html><html><head>

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 7 of 21

<title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]--><script>window.onload=function() {

var mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');mycontext.fillStyle='rgb(0,0,255)';mycontext.fillRect(30,30,300,300);mycontext.fillStyle='rgba(0,255,0,0.5)';mycontext.fillRect(60,60,300,300);mycontext.fillStyle='rgba(255,0,0,0.25)';mycontext.fillRect(90,90,300,300);

}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400"style="border: 10px yellow solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

Gradients—which are coordinated mixes of color—are native to the canvas throughtwo methods: createLinearGradient and createRadialGradient. Figure 4shows a linear gradient. The addColorStop method defines a color and where itbecomes active in the gradient. Since a gradient can have multiple color stops, thispositioning is subjective. The color stop positioning value must be between 0 and 1,but testing variations and the number of color stops can yield different results, evenif a value (such as .25) remains the same. In other words, one color stop can haveits position as .25, but the related color can occur a bit off from a quarter of the waythrough the imagery based on where you set other color stops. Remember that thisis a new implementation and perhaps still being ironed out. One advantage ofgradients is that they are always attractive, whether or not the code and the resultare perfectly coordinated.

Figure 4. A linear gradient

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 8 of 21

The gradient in Figure 4 was created with the JavaScript code shown in Listing 4.

Listing 4. Creating a linear gradient

var mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');var

mygradient=mycontext.createLinearGradient(30,30,300,300);mygradient.addColorStop(0,"#FF0000");mygradient.addColorStop(1,"#00FF00");mycontext.fillStyle=mygradient;mycontext.fillRect(0,0,400,400);

Notice that the color stop in Listing 4 is fully implemented as a method of anon-the-fly gradient created from the method itself. The statement

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 9 of 21

mygradient.addColorStop(0,"#FF0000") shows that the color stop has bothparameters: the position and the color.

Figure 5 shows a radial gradient. The code used to create this gradient is similar tothat in Listing 4, except that the createRadialGradient method is used insteadof the createLinearGradient method.

Figure 5. A radial gradient

The code used to create the radial gradient in Figure 5 is shown in Listing 5. Noticeall five color stops.

Listing 5. Creating a radial gradient

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 10 of 21

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]--><script>window.onload=function() {

var mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');var

mygradient=mycontext.createRadialGradient(300,300,0,300,300,300);mygradient.addColorStop("0","magenta");mygradient.addColorStop(".25","blue");mygradient.addColorStop(".50","green");mygradient.addColorStop(".75","yellow");mygradient.addColorStop("1.0","red");mycontext.fillStyle=mygradient;mycontext.fillRect(0,0,400,400);

}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400"style="border: 10px blue solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

Multiple canvases

A web page can contain multiple canvases, each referenced with its own uniqueJavaScript context variable. Consequently, each canvas works independently of theothers. Figure 6 shows four canvases, each with a different visual.

Figure 6. Multiple canvases on a single web page

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 11 of 21

Listing 6 shows the code used to create the page in Figure 6. Notice that eachcanvas has a unique ID and that each context is unique.

Listing 6. Multiple canvases on a single web page

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]--><script>window.onload=function() {

varmycontext1=document.getElementById("myCanvasTag1").getContext('2d');

varmycontext2=document.getElementById("myCanvasTag2").getContext('2d');

var

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 12 of 21

mycontext3=document.getElementById("myCanvasTag3").getContext('2d');var

mycontext4=document.getElementById("myCanvasTag4").getContext('2d');// gradient 1var

mygradient1=mycontext1.createLinearGradient(30,30,90,90);mygradient1.addColorStop(0,"#FF0000");mygradient1.addColorStop(1,"#00FF00");mycontext1.fillStyle=mygradient1;mycontext1.fillRect(0,0,100,100);// gradient 2var

mygradient2=mycontext2.createLinearGradient(30,30,90,90);mygradient2.addColorStop(1,"#FF0000");mygradient2.addColorStop(0,"#00FF00");mycontext2.fillStyle=mygradient2;mycontext2.fillRect(0,0,100,100);

varmygradient3=mycontext3.createLinearGradient(30,30,90,90);

mygradient3.addColorStop(0,"#0000FF");mygradient3.addColorStop(.5,"#00FFDD");mycontext3.fillStyle=mygradient3;mycontext3.fillRect(0,0,100,100);

varmygradient4=mycontext1.createLinearGradient(30,30,90,90);

mygradient4.addColorStop(0,"#DD33CC");mygradient4.addColorStop(1,"#EEEEEE");mycontext4.fillStyle=mygradient4;mycontext4.fillRect(0,0,100,100);

}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag1" width="100" height="100"style="border: 10px blue solid"></canvas><canvas id="myCanvasTag2" width="100" height="100"style="border: 10px green solid"></canvas><br /><canvas id="myCanvasTag3" width="100" height="100"style="border: 10px red solid"></canvas><canvas id="myCanvasTag4" width="100" height="100"style="border: 10px black solid"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

JavaScript events and animation

This article has shown various methods that you can use with the canvas, all ofwhich have created a visual result. Now kick Canvas use up a notch with events andanimation. JavaScript recognizes many events, including moving or hovering themouse over a specific web page element. The JavaScript language recognizesmany more events; several are used in the example that follows.

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 13 of 21

Incorporating events

The example shown in Figure 7 was created using methods you've seen in theearlier listings. Now add a few new techniques. The nose, the eyes, and the circularitems and outer boundary of the face are created with the arc method. Theeyelashes are drawn as lines, and the mouth is created as a bezier curve. Figure 7also presents text at the bottom of the canvas that was created using the fillTextmethod.

Figure 7. JavaScript events are used to make a face wink

Listing 7 shows the code used for Figure 7.

Listing 7. Using events to create a wink

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]>

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 14 of 21

<script type="text/javascript"src="excanvas.js"></script><![endif]--><script>window.onload=function() {var mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');

//draw facemycontext.beginPath();mycontext.arc(300, 250, 200, 0, Math.PI * 2, true);mycontext.closePath();mycontext.stroke();

//draw left eyemycontext.beginPath();mycontext.arc(220, 150, 30, 0, Math.PI * 2, true);mycontext.closePath();mycontext.fillStyle='rgb(100,100,225)';mycontext.fill();

//draw left irismycontext.beginPath();mycontext.arc(220, 150, 10, 0, Math.PI * 2, true);mycontext.closePath();mycontext.fillStyle='rgb(0,0,0)';mycontext.fill();

//draw left eyelidmycontext.beginPath();mycontext.arc(220, 150, 30, 0, Math.PI, true);mycontext.closePath();mycontext.fillStyle='rgb(200,200,200)';mycontext.fill();

//draw left eyelashesmycontext.strokeStyle='rgb(0,0,0)';lashes(mycontext,198, 170, 193, 185);lashes(mycontext,208, 177, 204, 193);lashes(mycontext,220, 180, 220, 195);lashes(mycontext,232, 177, 236, 193);lashes(mycontext,242, 170, 247, 185);mycontext.stroke();

openeye();

//draw right eyelashesmycontext.strokeStyle='rgb(0,0,0)';lashes(mycontext, 358, 170, 353, 185);lashes(mycontext, 368, 177, 364, 193);lashes(mycontext, 380, 180, 380, 195);lashes(mycontext, 392, 177, 396, 193);lashes(mycontext, 402, 170, 407, 185);mycontext.stroke();

//draw nosemycontext.beginPath();mycontext.arc(300, 250, 20, 0, Math.PI * 2, true);mycontext.closePath();mycontext.stroke();

// draw smilemycontext.beginPath();mycontext.lineWidth = 10;mycontext.moveTo(180, 320);mycontext.bezierCurveTo(140, 320, 340, 420, 400, 360);mycontext.closePath();mycontext.stroke();

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 15 of 21

//draw message at bottommycontext.font="1em sans-serif";mycontext.fillStyle="rgb(0,0,0)";mycontext.fillText("Move the mouse over and off the

canvas - the face winks!", 10, 480);}

function lashes(cntx,x1,y1,x2,y2) {cntx.moveTo(x1,y1);cntx.lineTo(x2,y2);

}

function closeeye() {//close right eyevar mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');mycontext.beginPath();mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);mycontext.closePath();mycontext.fillStyle='rgb(200,200,200)';mycontext.fill();

}

function openeye() {//open right eyevar mycanvas=document.getElementById("myCanvasTag");var mycontext=mycanvas.getContext('2d');mycontext.beginPath();mycontext.arc(380, 150, 30, 0, Math.PI * 2, true);mycontext.closePath();mycontext.fillStyle='rgb(100,100,225)';mycontext.fill();//draw right irismycontext.beginPath();mycontext.arc(380, 150, 10, 0, Math.PI * 2, true);mycontext.closePath();mycontext.fillStyle='rgb(0,0,0)';mycontext.fill();//draw right eyelidmycontext.beginPath();mycontext.arc(380, 150, 30, 0, Math.PI, true);mycontext.closePath();mycontext.fillStyle='rgb(200,200,200)';mycontext.fill();

}</script></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="600" height="500"style="border: 5px blue solid"

onmouseover="closeeye()"onmouseout="openeye()"></canvas><br /><br /><a href="index.html">back</a></div></body></html>

The face in Figure 7 was altered with JavaScript events. In particular, theonmouseover and onmouseout events are used to call the closeeye() andopeneye() functions, respectively. These functions are not methods of the canvas,but are instead standard JavaScript functions. The connection of the events to thefunctions is made in the canvas element itself. The body section of the page is nearthe bottom of the code in Listing 7, where the canvas is. Within the canvas tag is

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 16 of 21

onmouseover="closeeye()" onmouseout="openeye()"

A new construct appears in the Listing 7 code—the use of beginPath() andendPath(), which delineate distinct complex drawing actions. This encasing codedraws a particular piece of the image to stand separate from the other drawingactions.

A few notable items about the code in Listing 7 are listed below:

• When the page opens, the right eye is drawn by a call to the openeye()function.

• Text is written onto the canvas using the fillText method.

• In the arc methods, MATH.PI * 2 creates a full circle, whereas justMATH.PI creates a semicircle (for example, the eyelids).

Animation

JavaScript packs a powerful programmatic punch. The language can perform quite abit of manipulation, as shown in Listing 8. The code runs repeatedly, drawing lineson the canvas. The line colors are randomly set.

Listing 8. Using JavaScript to create animation

<!DOCTYPE html><html><head><title>HTML5 Canvas Demo</title><!--[if IE]><script type="text/javascript"

src="excanvas.js"></script><![endif]--></head><body><div style="margin-left:30px;"><canvas id="myCanvasTag" width="400" height="400"style="border: 10px blue solid"></canvas><br /><br /><a href="index.html">back</a></div><script>var mycanvas = document.getElementById("myCanvasTag")var mycontext = mycanvas.getContext('2d');var x;var y;var x2;var y2;var r;var g;var b;

function line() {x=Math.floor(Math.random()*190) +

Math.floor(Math.random()*190);

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 17 of 21

y=Math.floor(Math.random()*190) +Math.floor(Math.random()*190);

x2=Math.floor(Math.random()*190) +Math.floor(Math.random()*190);

y2=Math.floor(Math.random()*190) +Math.floor(Math.random()*190);

r=Math.floor(Math.random()*255);g=Math.floor(Math.random()*255);b=Math.floor(Math.random()*255);mycontext.moveTo(x, y);mycontext.lineTo(x2, y2);mycontext.strokeStyle='rgb(' + r + ',' + g + ',' + b +

')';mycontext.lineWidth=Math.floor(Math.random()*6);mycontext.stroke();mycontext.restore();

}setInterval(line, 100);

</script></body></html>

Figure 8 shows the animation caught as a snapshot. The code in Listing 8 differsfrom all the other code examples in this article in that the JavaScript block is placedat the bottom of the page, underneath the canvas element. This ensures that thecanvas is already rendered before the code runs.

Figure 8. JavaScript is used to draw endless random lines

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 18 of 21

Summary

HTML5 is poised to change the playing field for web development. The newelements make page layout easier; make local data storage possible through thebrowser; and have native audio, video, and graphic platforms like the canvas. Asbrowsers update to accommodate more of the new functionality, the nature of theweb and the user experience will become more exciting. Great times lie ahead forweb development.

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 19 of 21

Resources

Learn

• Find the live demonstrations of the examples shown in the article.

• WHATWG is a community of developers working with the W3C to fine-tuneHTML5.

• Start implementing HTML5 today.

• Check out canvas tutorials and demos from the Mozilla developers.

• PHPGuru.org offers information about using canvas and provides many greatdemos and examples.

• See "New to Web Development" to start learning about dynamic webapplications and more.

• The developerWorks Web development zone specializes in articles coveringvarious web-based solutions.

• Stay current with developerWorks' IBM technical events and webcasts.

• Watch developerWorks on-demand demos ranging from product installation andsetup for beginners to advanced functionality for experienced developers.

Get products and technologies

• Download the excanvas.js library for Internet Explorer.

• Download IBM product evaluation versions or explore the online trials in theIBM SOA Sandbox, and get your hands on application development tools andmiddleware products from IBM® DB2®, Lotus®, Rational®, Tivoli®, andWebSphere®.

Discuss

• Create your My developerWorks profile today and set up a watch list onHTML5. Get connected and stay connected with the developerWorkscommunity.

• Find other developerWorks members interested in web development.

• Share what you know: Join one of our developerWorks groups focused on webtopics.

• Roland Barcia talks about Web 2.0 and middleware in his blog.

• Follow developerWorks' members' shared bookmarks on web topics.

• Get answers quickly: Visit the Web 2.0 Apps forum.

developerWorks® ibm.com/developerWorks

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 20 of 21

• Get answers quickly: Visit the Ajax forum.

About the author

Ken BluttmanKen Bluttman is the author of more than a dozen computer bookswhose content spans from desktop application development to thelatest in web development, design, and architecture. You can reach himat kb@kgadesigns.com.

ibm.com/developerWorks developerWorks®

Create great graphics with the HTML5 canvas Trademarks© Copyright IBM Corporation 2011. All rights reserved. Page 21 of 21