Canvas in HTML 5

The graphic surface of HTML 5 is a universal tool for creating applications, both for smartphones or desktop computers.

Canvas is already used to make games and therefore constitutes an alternative to Flash, as it is used for more serious applications such as mapping, geometric, architectural plans, etc...

A major trend among webmasters is currently wear old software on this new medium. We thus see Sim City, Wolfenstein 3D, appear on Web pages.

Canvas tutorial

Color cycling

From first steps to more elaborate drawings.

How many canvas tags in a Web page?
Actually, according to the demo, 10000 are possible!

Getting started.

Drawing lines with different colors.

Drawing a curve. Quadratic vs. Bezier.

The rect and fillRect methods.

How to make a rounded-corners rectangle.

Drawing an arc. With the arc method.

The arcTo method. Annotated example to understand how it works.

Circle, arcs and pie chart. A pie chart is designed by filling sectors in a circle with different colors. Labels are added with a little more trigonometry.

Drawing an ellipse with the arc method. We use both the arc and scale method.

Text in Canvas.

Basic transformations on an image. How to flip a picture, scale it, rotate it, etc ... These demonstrations are also an opportunity to learn about the possibility of canvas and see the effects of scale and translate functions.

How to give a transparency effect to an image.


Mark Twain against generalization, quote in speech bubble.

SVG in canvas.
A script to convert SVG files to JavaScript objects et display the images in HTML 5 canvas.

Logo Maker.
Online logo editor in JavaScript. The tutorial.

Pie chart generator
Online tool to create automatically a chart from a list of values.

Drawing a speech bubble in Canvas
How to put a quote into a comic bubble.

External links

Applications and demos of Canvas
Colour Picker, 3D Maze, etc.

Color cycling
List of demos. The water is animated on the the image on the right.

2D Context
W3C spec of Canvas 2D.

Making a paint program in Canvas