Search
Make Good Use of Your Sidebar

Use this space for anything from simple blocks of text to powerful widgets, like our Twitter and Flickr widgets. Learn more.

To access Website Management, hit the 'esc' key or use this Login link.

HTML5/Javascript - Drawing on the Canvas

I've been playing around with canvas, and as noted throughout the web, there are distinct differences in performance across the various browsers.  Below is a good example of this; I've created a little wierd/rotation/exploding particle demo, but I used two different method to draw the particles to the canvas, fillRect and drawImage, and the performance difference (anectdotably) is surprising. (Both are drawing 2000 'particles')

Here is fillRect:

Start/Pause - Click here!
Reset

Here is drawImage:

 

Start/Pause - Click here!
Reset

So, depending on your browser, there's a noticable difference between the two.

More on the HTML5 theme, my next side project is a simple 3d engine in Javascript. I'm sure there's one that exists somewhere out there already, but that's no fun! I already have some of the work done into, once I get some of the rotation math into it, I'll post up a quick demo, so far it's looking pretty good. In the end, though, the canvas is pretty cool and will make websites in the near future to become pretty exciting. :D

PrintView Printer Friendly Version

EmailEmail Article to Friend

Reader Comments

There are no comments for this journal entry. To create a new comment, use the form below.

PostPost a New Comment

Enter your information below to add a new comment.

My response is on my own website »
Author Email (optional):
Author URL (optional):
Post:
 
Some HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Main | First! »