HTML5 Canvas Tutorial
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.
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
- clearRect() - Clear a rectangle on the canvas
- Paths - drawing advanced paths such as curves etc.
- Gradient colors
- State + State Stack
- toDataUrl() - convert graphics to a data URL
- Pixel manipulation
To learn more about each of these above topics, click the link in the list.