Saturday, March 27, 2010

Its all about HTML5 - CANVAS and CSS


Raindrop Logo in CSS

Playing around with -moz-radial-gradient this past while, and seeing the amazing job done on the CSS Opera logo by David Desandro, I thought I’d have a go at recreating one of the logos I illustrated within the past year using pure CSS.

Opera logo in CSS


Aside from another shameless plea for attention, this demonstration gives me a chance to look at some CSS3 properties across browsers.

Dynamic 3D lighting effects in Canvas



I made a little experiment with normal mapping and phong shading in javascript which turned out to work quite well. I think with a little bit of tweaking it could be used in a real time game. Just move your mouse over the images bellow to see it in action. You'll need a modern browser supporting the canvas tag for this to work. Google Chrome seems to be the fastest.

Bye Bye Flash: Network Graph is now Canvas



When I initially sat down to write the Network Graph two years ago, I chose Adobe Flash for two primary reasons: 1) I was already familiar with Flash, having worked with it professionally, and 2) plausible alternatives such as Canvas and SVG were poorly supported across browsers, buggy, and slow.

Times have changed, however, and the HTML5 Canvas draft specification is now almost fully implemented on the latest versions of Chrome, Safari, and Firefox. Opera supports Canvas but not the text API. Canvas is missing entirely from Internet Explorer, but the word on the street is that IE9 will finally offer support. In the meantime, the open source community has created excanvas, a way to get Canvas support on current versions of IE.

No comments: