1. HTML5 Canvas Tutorial
2. HTML5 Canvas Overview
3. HTML5 Canvas: Stroke and Fill
4. HTML5 Canvas: Rectangles
5. HTML5 Canvas: clearRect()
6. HTML5 Canvas: Paths
7. HTML5 Canvas: Gradients
8. HTML5 Canvas: Shadows
9. HTML5 Canvas: Text
10. HTML5 Canvas: Images
11. HTML5 Canvas: Composition
12. HTML5 Canvas: Transformations
13. HTML5 Canvas: State + State Stack
14. HTML5 Canvas: toDataURL()
15. HTML5 Canvas: Pixel Manipulation
16. HTML5 Canvas: Animation

• HTML5 Canvas Features and Concepts

The HTML5 Canvas element enables you do draw 2D graphics freely inside the bounds of the canvas element in your HTML5 page. Thus, the HTML5 Canvas is a great alternative for e.g. drawing charts and graphs inside a web page. You can even create 2D games using the HTML5 Canvas element.

The HTML5 Canvas element is a normal HTML5 element, so you declare it like any other HTML element. However, the way you draw graphics on the canvas element is via a JavaScript API.

Below is a simple example. Click this button to draw on the canvas:

This example, however, only shows a very little part of what you can do with the HTML5 canvas element.

HTML5 Canvas Features and Concepts

Here is a list of the HTML5 Canvas element core features and concepts:

• Stroke and Fill
• Rectangles
• clearRect() - Clear a rectangle on the canvas
• Paths - drawing advanced paths such as curves etc.
• Gradient colors
• Shadows
• Text
• Images
• Composition
• Transformation
• State + State Stack
• toDataUrl() - convert graphics to a data URL
• Pixel manipulation
• Animation

To learn more about each of these above topics, click the link in the list.