Learning HTML Canvas

2h 10mIntermediate2018-11-26

Authors

Joe Marini

Senior Developer Advocate at Google, Developer

Course details

JavaScript developers can create freeform graphics on a drawing surface known as the Canvas. The Canvas unlocks the ability to create rich, native web applications with 2D and 3D graphics. In this course, instructor Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a webpage. Learn how to draw basic and complex shapes, adjust colors and styles, and add shadows, patterns, and gradients. Then explore more advanced techniques such as scaling, rotating, and compositing objects. Plus, discover how to use Canvas elements to build a full-featured slideshow and a double-buffered animation.

Learning objectives
Canvas examples
Drawing shapes, arcs, paths, and curves
Drawing text
Drawing shadows, patterns, and gradients
Using clipping paths
Displaying images and video
Transforming objects with scaling and rotation
Manipulating raw pixels
Applying transitions
Creating animations

Skills covered

HTMLJavaScriptOracleFront-End Web DevelopmentLearningWeb DevelopmentProgramming LanguagesOpen SourceSoftware Development

Concepts

0. Introduction

01 - Graphics programming with JavaScript
02 - What you should know

1. Overview of Canvas

03 - Interesting canvas examples
04 - The canvas element
05 - The canvas drawing context

2. Basic Canvas Drawing Techniques

06 - Colors and styles
07 - Rectangles
08 - Lines
09 - The canvas state
10 - Arcs
11 - Paths
12 - Bezier and quadratic curves
13 - Drawing text

3. Complex Canvas Drawing

14 - Drawing shadows
15 - Using patterns
16 - Using gradients
17 - Images and video
18 - Clipping paths

4. Advanced Drawing APIs

19 - Using translate
20 - Using scaling
21 - Using rotation
22 - Custom transformations
23 - Compositing and globalAlpha
24 - Compositing and globalAlpha example
25 - Manipulating raw pixels

5. Practical Examples

26 - Building an image slideshow
27 - Using smooth transitions
28 - Basic animation
29 - Double-buffered animation

Conclusion

30 - Next steps