HTML5 and CSS3, Second Edition

html5_canvas/logo_gradient.html

varcanvas= document.getElementById("logo");

➤

if(G_vmlCanvasManager!= undefined){// IE 8

varG_vmlCanvasManager;// so non-IEbrowserswon'terror

➤

➤ G_vmlCanvasManager.initElement(canvas);

➤ }

if(canvas.getContext){

drawLogo();

}

These lines force the ExplorerCanvas library to attach its behavior to the

canvas element we defined. Sometimes ExplorerCanvas doesn’t quite finish

up its Document Object Model (DOM) manipulation tricks before we’re ready

to use it. If we were using jQuery and had placed the drawLogo() function inside

of jQuery’s document.ready() handler, we wouldn’t need these lines.

With these changes, things work just fine in Internet Explorer 8.

For something this simple, we could just place a PNG version of the logo inside

the <canvas> tag for the fallback content. Browsers that don’t support <canvas>

would just display the image.

Now that you see how easy it is to create simple shapes on the canvas, let’s

look at another use.

report erratum • discuss

Drawing a Logo on the Canvas • 119

Download from Wow! eBook <www.wowebook.com>