Image licensed by Ingram Image.
You love developing for the web, you’ve done this for quite a while and you’ve have seen a lot of cool techniques come and go over the past decade. Haven’t you felt kind of limited one time or another when it came to developing more than simple form-based applications? Especially when it comes to developing games?
A multiplayer action RPG like BrowserQuest wouldn’t have been possible in 2002. Ever since the proof of concept by 9elements an unbelievable amount of experiments and projects have popped up on the internet. Beside games and widgets, major companies like Google now hire real time graphics experts to build interactive media campaigns based on HTML5 Canvas technologies.
Already hooked by these projects? Then it’s time dive in!
A retrospective
In the past, companies tried to impose proprietary multimedia solutions, most frequently in the form of a plugin, as a standard by making use of their market dominance. It was a highly lucrative strategy, as developers and software companies had to licence their tools in order to create content for these plugins. In order to visualise graphics and interactive content in a performance oriented fashion, Flash based technologies were most common. Frequent implementations included pixel perfect websites, video-players, animations, simple games, rich internet applications and various types of visualisations. Despite the fact that it had to be installed on the computer, Flash spread widely and reached a huge acceptance level among users.
Post-Web 2.0 developments
This dominance started to crumble some years ago. JavaScript performance has improved and HTML5 finally offered developers open and standardised ways to handle multimedia content and real-time animations much better without the need for additional plugins. In short, it’s now easier that ever before.
A worthwhile and unique improvement is HTML5 canvas. At first glance, this new DOM-Element seems to have very limited functionality. Similar to a chessboard, the canvas is made up of indexed fields and has fixed dimensions. Every field of the board has a unique coordinate, to which a colour value is assigned. The coordinate system is, as opposed to the usual conventions in math, upside down.
In the past years, developers have stressed that designers must get used to the idea that websites are meant to be flexible. Not pixel perfect! Ideally, a website is based on responsive methodology and is using responsive CSS techniques. Is this all obsolete now? Will everyone be developing their websites by just using Canvas from now on?
Actually, exactly the opposite is the case. The trend is still running towards responsiveness. Canvas should be seen as an additional tool in the developer’s box that enables us to realize certain challenges. In the past, it was impossible to achieve some goals without using browser add-ons – especially when it came to projects which made use of graphical animations or even realtime manipulations.
When to use canvas
With applications increasingly moving from the desktop to the browser, Google has led the way with Chrome OS and its focus on web apps. For applications alike office or mail, there is nearly no real need for well performing graphics components like canvas: You can just stick to most of the known ways of developing web applications. But imagine the following scenario: How would, for instance, a photo editing software be implemented in the browser? A smart web developer will definitely come up with some solutions based on using back-end technology. In reality though, processing every pixel of a picture over an internet connection feels rather awkward.
Another typical case in which you can make a good use of canvas are diagrams. While bar charts can be implemented with conventional HTML-based solutions, this is not the case with curve diagrams or even pi charts, especially if updates in realtime are required. In this case, canvas provides a reasonable advantage by being able to draw non-rectangular shapes and the capability to manipulate the diagram on the client side. In the past, it was common to render the diagrams on the server, download and display them in the browser. This resulted in server side computational load and growth of data traffic.
First Steps
When seen isolated and as separate entity, canvas seems less than spectacular. It appears more like an empty image container. By generating an instance with , the browser only creates a new area displayed as transparent surface: