Developing Web Applications using HTML5 canvas

It seems Apple introduced the canvas element almost 10 years ago, in 2004! Alas, I first learned about canvas only recently, while randomly browsing books in the computer programming section at Barnes & Noble. I happened to be browsing books about HTML5, CSS3 and JavaScript for building my website and canvas fit perfectly into my project. After playing with it for a while, it became clear that as far as I was concerned, it was the next QBASIC. Only much better in almost all respects than QBASIC.

The coolest things about canvas is that it can be used to build simple but useful client-side graphics applications that run inside web browsers. These applications can be quite sophisticated, with cross-browser compatibility and a complete point-and-click UI component.

The simple canvas API leads to a quick development cycle. Even if you are completely new to canvas, you will be writing pretty decent graphics apps very quickly. This time will be even shorter if you already know HTML5, CSS3 and JavaScript. Most (if not all) browsers now have dedicated development tools that are useful for debugging and optimizing your (JavaScript) code.

Lastly, canvas apps can be ported to iOS devices using mobile development frameworks like PhoneGap. This means I can create a game using HTML5, CSS3 and JavaScript and play it on my iPhone as if it is a native app. Of course, a better option is to master Objective-C and write a really native app for iPhone and iPad.

On my website, I have some rather simple examples of what canvas can do. These include applications for generating fractals, cellular automata and for a 1D, two-phase lattice Boltzmann method. I plan to spend a lot of time with canvas in the future.


One thought on “Developing Web Applications using HTML5 canvas”

Leave a Reply

Your email address will not be published. Required fields are marked *