The <canvas> element

Hi! This week is about drawing and animating.

HTML5 introduced a new element called the "canvas" that comes with a rich API for drawing lines, rectangles, circles and arcs, also images, and you can define lots of style properties like colors, gradients, patterns or textures, shadows, you can specify line widths, and so on.

It also supports hardware acceleration on most browsers and doing animation at 60 frames/second for writing smooth games for example, is possible.

The API is very rich, this week is one of the most complete must heavy one you will have in the MOOC and some advanced features of the canvas like time-based animation or support for gamepads or external devices for controlling a game for example, will be only seen in the HTML5 part-2 course.

We will also teach all the basics for writing an HTML5 game like collision detection and so on, in that course.

This week we will learn all the basics and it's quite a lot.

Before going to look at some examples and start writing code and drawing lines and so on... I propose to give a small look at some popular applications, or applications that show the things we can do with a canvas.

I propose to start with Foot Chinko, that is a HTML5 game that is very popular

Let's open it...ok. It's all written in HTML5, you can see that it came from a URL. I'm going to remove a little bit the sound...

You select a team...

I really like this game...

It's a mix of Pachinko and soccer games... you can spend some time playing it. First levels are quite easy... you just click with the mouse...

It's fun, it's smooth, it's all HTML5...

Another example I prepared is about data visualization,

This is a blog post with a kind of database of the best tools for data visualization, you will find links to JavaScript libraries or frameworks for drawing charts maps, all kinds of visualizations...

Personnaly I use paper.jsa lot and also d3.js that you will find somewhere in this list... for data visualization...

Another interesting resource is this demo....

It's completely useless, it just shows some tweets in real time with an animation here, that follows the mouse...

The interesting part is that it has been written in 2009 at the very beginning of HTML5... and in that time this demo was not smooth at all, it was about 10 frames/second and now it's really smooth and it shows the improvements in the implementations by the browsers, of the canvas

API. Now, it uses hardware acceleration, GPUs of graphic cards, and it can do lots of things at 60 frames/second

I also wrote this small piece of software: a multitrack audio player for musicians. You can play songs with different tracks... you can mute tracks, listen just to single ones, and a remarkable thing is that all these wave shapes are drawn in canvases, and the frequencies here, that are dancing with the music... it's an animation in a canvas, at 60 frames / second, with some blur effects....

This is the end of the introduction, in the next parts of the course you will learn from very basic examples to more complex ones how to draw and hot to animate in a canvas.

I hope you will like this week, because it's one of the most graphical and fun one in my opinion...

Bye!

External resources

• Comprehensive HTML5 canvas tutorials

• An HTML Canvas Deep Dive

• MDN's Web docs: <canvas>: The Graphics Canvas element

• The <canvas> element is well supported by browsers:

  • CanIUse: browser support table

  • MDN's compatibility table of <canvas>