You can find tutorials on using the HTML5 canvas and JavaScript for creating shapes, animation, and game development right here. Learning how to work with the HTML5 canvas is a great idea if you are thinking of developing web-based games, animations or rich interactive web-based applications. When you see a word in a tutorial that is underlined with a dotted line you can click or tap on it for a definition of that word in the glossary.
Select one of the tutorials below to get started!
- Using the HTML5 canvas tag to draw shapes
- Drawing lines using the HTML5 canvas element
- Styling lines on the canvas
- Joining lines on the canvas
- Drawing paths on the canvas
- Clipping shapes on the canvas
- Drawing arcs and circles on the canvas
- Using the arcTo method to draw arcs
- Drawing quadratic curves
- Creating colour gradients to fill shapes
- Simple animations using JavaScript
- Animating (moving) an image using JavaScript