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

Introduction

Graphics programming with JavaScript
What you should know

Overview of Canvas

Interesting canvas examples
The canvas element
The canvas drawing context

Basic Canvas Drawing Techniques

Colors and styles
Rectangles
Lines
The canvas state
Arcs
Paths
Bezier and quadratic curves
Drawing text

Complex Canvas Drawing

Drawing shadows
Using patterns
Using gradients
Images and video
Clipping paths

Advanced Drawing APIs

Using translate
Using scaling
Using rotation
Custom transformations
Compositing and globalAlpha
Compositing and globalAlpha example
Manipulating raw pixels

Practical Examples

Building an image slideshow
Using smooth transitions
Basic animation
Double-buffered animation

Conclusion

Next steps