About

Exploring possibilities by comparing the HTML5 canvas element with the possibilities of CSS3 animations Introduction HTML5 is becoming more and more popular. With the increasing popularity of mobile devices such as tablets and smartphones, the need for alternatives to the popular Flash plugin from Adobe has also been growing. Just recently, Adobe announced that Flash will no longer be supported for mobile devices. This means that Adobe itself will focus on HTML5 as a key technology for those devices - and desktop systems sooner or later. One disadvantage of HTML was the lack of multimedia techniques. In HTML, you could not display a video or draw on the screen. With HTML5, new elements such as <video> and <canvas> have been introduced. Those elements give developers the possibility to use multimedia technology in "native" HTML, just by writing some JavaScript in combination with HTML. A basic action that should be provided by multimedia technologies is animation. In HTML5, there are some ways to create such actions. In this article, I will only compare the new <canvas> element with the upcoming CSS3 animation technique. Other possibilities would include the creation and animation of DOM elements or SVG elements. Those possibilities will not be included in this discussion. It should be noted from the beginning that the canvas-technology is supported in the current releases of all major browsers, while CSS3 animations are only possible in the latest editions of Firefox and Chrome. The next IE will also provide CSS3 animations. Background I am currently giving a lecture on creating WebApplications using HTML5, CSS3 and JavaScript. This is a lecture with tutorials. For one of the tutorials, I picked a sample canvas animation - just showing in which direction we are heading to with a technology like this. Then I introduced the CSS3 animation in the lecture (everyone was very excited about it) and wanted to create a simple homework task using the CSS3 animations. What came to my mind was: How easy or hard would it be to actually transform the canvas animation into a complete CSS3 animation? This involved several parts: Creating all the different <div>-elements in order to "box" everything Draw everything using styles on those elements with style rules like borders, background-gradients and rounded corners Actually animating the elements The reason for using CSS3 animation over the <canvas>-element is quite important: While browsers can optimize their elements performance (regarding their style, i.e. CSS), they cannot optimize our custom drawing routines used in a canvas. The reason for this lies in the browser's ability to use hardware mainly the graphics card. Currently the browser does not give us direct access to the graphics card, i.e., every drawing operation has to go over some function in the browser first. This problem could be prevented with techniques such as webgl, where the browser does give the developer direct access to the graphics card. However, this is treated as a security problem and will not become standardized. One important rule for developing WebApplications is standardization - since this is our portal to a huge customer base. If we excluded some of the most popular browsers, we would certainly lose a lot of potential visitors.