Search 6,000+ CA Community College Courses

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

Design the Web: Illustrator to Animated HTML5 Canvas

via LinkedIn Learning

Go to class Write review

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
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

Taught by

Chris Converse

Reviews

4.8 rating at LinkedIn Learning based on 53 ratings

Start your review of Design the Web: Illustrator to Animated HTML5 Canvas

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.