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

From first steps to more elaborate drawings.

• 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.
• A circle is a full arc.
• Drawing an ellipse with the arc method. We use both the arc and scale method.
• Text in Canvas.

Applications

• Logo Maker.
  Online logo editor in JavaScript. The tutorial.
• Drawing a speech bubble in Canvas
  How to put a quote into a comic bubble.

• Transparency
  How to give a transparency effect to an image.

Demonstrations

• 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. You can turn the sound on in the URL, but I do not recommend as it does not stop when exiting.
• Effect Games. Special effects.
• List of Canvas applications.

Tutorials and references

• 2D Context. W3C spec of Canvas 2D.
• Designing a user interface in Canvas.
• Making a paint program in Canvas.

Tweet