Zend Certified Engineer

phpguru.org

Quality PHP and Javascript code
Download RGraph: HTML5 canvas graph library... Home ~ Downloads ~ FAQs ~ Licensing
RSS Feed RSS Feed
Follow me on Twitter Follow me on Twitter

Add to Google...

HTML5 & CSS3

Articles

Javascript

PHP5

PHP4






Bookmark with delicious tweet this site Post to Google Buzz! Stumble! this site

A HTML5 canvas example: CanvasBalls!

[Content that is shown to users using browsers that don't support the canvas tag]

A small example (from when I was learning to use canvas and now tarted up a little) of drawing circles on a canvas. The colours have an alpha channel, for example: rgba(255,0,0,0.5). The dashed canvas border is just some CSS that I've applied to the canvas tag to make it easily identifiable. A far better example of the canvas tag is my canvas based graphing library: RGraph. I was going to add the source code, but as I added animation it grew somewhat. So now you'll simply have to view the source (life is so hard isn't it...?).

     




Note

By forcing IE9 into HTML5 mode and adding lots of balls, you'll be able to really see the speed advantage it has over other browsers due to hardware acceleration.

RGraph: HTML5 canvas graph library

Example graph made using RGraph

If you're interested in web development, then you may also be interested in RGraph: HTML5 canvas graph library. It uses HTML5 features to produce a wide variety of graph types. Because it moves the creation of graphs from the server to the client, it can significantly reduce the load on your server and your bandwidth usage.