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

LinkedIn Learning

Learning HTML Canvas

via LinkedIn Learning

Go to class Write review
CourseHorse Ad

Give the Gift That Unlocks Potential

Learn More → Datacamp Ad

Power BI Fundamentals - Create visualizations and dashboards from scratch

Learn More →

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
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
1. Overview of Canvas
  • Interesting canvas examples
  • The canvas element
  • The canvas drawing context
2. Basic Canvas Drawing Techniques
  • Colors and styles
  • Rectangles
  • Lines
  • The canvas state
  • Arcs
  • Paths
  • Bezier and quadratic curves
  • Drawing text
3. Complex Canvas Drawing
  • Drawing shadows
  • Using patterns
  • Using gradients
  • Images and video
  • Clipping paths
4. Advanced Drawing APIs
  • Using translate
  • Using scaling
  • Using rotation
  • Custom transformations
  • Compositing and globalAlpha
  • Compositing and globalAlpha example
  • Manipulating raw pixels
5. Practical Examples
  • Building an image slideshow
  • Using smooth transitions
  • Basic animation
  • Double-buffered animation
Conclusion
  • Next steps

Taught by

Joe Marini

Reviews

4.9 rating at LinkedIn Learning based on 22 ratings

Start your review of Learning HTML 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.