HTML5 Canvas: From Pixels to Animation!

Need help getting started?


Course Syllabus

Prerequisite Knowledge

You should have some HTML and JavaScript experience and at minimum understand loops, functions, and conditional statements(if/else).

Udacity’s JavaScript Basics course and HTML/CSS course are good preparation for this course.

Lesson 1: HTML5 Canvas Basics

In this lesson, we’ll discuss what the Canvas is, how it affects graphics in the browser and what makes it truly awesome. We’ll make compositions with text and images (e.g. memes) as we learn the API.

Lesson 2: From Pixels to Animation

In this lesson, we’ll learn about how images are stored by the Canvas2D context, how to modify them on a pixel level by applying various effects and filters, and how to create animations.



City Background

Title: What Happened on Twenty-Third Street, New York City (1901)
Director: Edwin S. Porter
Production Company: Edwin S. Porter
Sponsor: Edison Mfg. Co.

Train Background

Title: Freight Train (1898)
Producer: The Edison Manufacturing Co. and Thomas A. Edison, Inc.


Title: Old Fasioned Auto Piano.wav
Producer: Razzvio

Title Card Design

Name: Silent Movie The End Title Card HD
Creator: Farrin N. Abbott / CopyCatFilms

Filters and Effects

Night Vision Scope

Creator: Andrew Kramer / Video Copilot