Design the Web: Illustrator to Animated HTML5 Canvas

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.

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