On the 6th November 2009 in Prague, here at the Google Developer Day 2009 (Prague GDD 2009) during the Keynote a few google’s experts pointed out some of the new features of HTML5: Canvas, Video, Geolocation, Gears and WebWorkers. Let me try to focus in this post on the first two, trying to motivate the main question of this post: “is the era of server-side generated images and flash enabled pages going to finish?”

Canvas

With this new element in HTML5 you can bring interactive plotting facilities into the Browser, making the web experience of visitors more interactive and complete. The use of Canvas will let you work with pictures and geometrical entities in a very simple way, directly into the browser (draft standard here).

Put in your HTML file’s <body> a <canvas> tag:

<canvas id="DrawingArea"></canvas>

and you get an empty space where to draw, for example, try the following Javascript:

function drawSomething() {
    var canvas=document.getElementById('DrawingArea');
    var context=canvas.getContext('2d');

    var gradLR = context.createLinearGradient(0, 0, 400, 400);
    gradLR.addColorStop(0, "white");
    gradLR.addColorStop(1, "blue");

    var gradRL = context.createLinearGradient(0, 0, 400, 400);
    gradRL.addColorStop(1, "white");
    gradRL.addColorStop(0, "blue");

    for(i=0;i<40;i++) {
      if(i%2==0)
        context.fillStyle = gradLR;
      else
        context.fillStyle = gradRL;
      context.translate(250,250)
      context.scale(.9,.9)
      context.translate(-250,-250)
      context.fillRect(0,0, 500, 500);
    }
  }

Try it here: http://www.keychain.it/canvas.html.

Try to add context.rotate(.1) before context.scale() and… another nice example :-)

For the full story see http://diveintohtml5.org/canvas.html and for a really amazing example open http://9elements.com/io/projects/html5/canvas/ and if your browser is canvas ready (it seems to work quite well in Chrome, IE-ChromeFrame, Firefox 3.5) you will see what I mean with “interactive web experience”. Finally right-click on the page and note that there is no flash player around.

Video

After years of frustrating experiences with embedded videos, seems that a new DOM object is going to be introduced in order to simplify our life. This will give us the possibility to interact in a very simple and light way with videos. Using the new <video> tag we will be able to simply insert videos in an html page as we do with images (take a look at the draft standard here). Unfortunately life is not so easy: there is not a single file format supported by all the popular web browsers (http://diveintohtml5.org/video.html#what-works) so using HTML5 video is somewhat combersome i.e. you have to put the video in two formas, for example the following combination might work:

<video>
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video &gt;

On the other hand having videos in the DOM opens the opportunity of interacting with the element, for example manipulating it in a canvas: http://www.keychain.it/video.html (the video is the one produced by Mark Pilgrim and available on diveintohtml5.org)