Overview
-
Want to create rich and immersive web experiences with HTML and JavaScript? Learn how to use the Canvas element to build 2D graphics and animations right on screen.
Syllabus
-
Introduction
- Graphics programming with JavaScript
- What you should know
- Interesting canvas examples
- The canvas element
- The canvas drawing context
- Colors and styles
- Rectangles
- Lines
- The canvas state
- Arcs
- Paths
- Bezier and quadratic curves
- Drawing text
- Drawing shadows
- Using patterns
- Using gradients
- Images and video
- Clipping paths
- Using translate
- Using scaling
- Using rotation
- Custom transformations
- Compositing and globalAlpha
- Compositing and globalAlpha example
- Manipulating raw pixels
- Building an image slideshow
- Using smooth transitions
- Basic animation
- Double-buffered animation
- Next steps
