HTML5 Canvas Ultimate Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Setting up the working environment

Lecture 2: What is Canvas?

Lecture 3: Hello World!

Chapter 2: Drawing Lines and Paths on Canvas

Lecture 1: Draw Lines

Lecture 2: Drawing Complex Lines

Lecture 3: Line Caps

Lecture 4: Line Joins

Lecture 5: Shadows

Lecture 6: Lab Session: Drawing Complex Shapes

Lecture 7: Drawing Curves

Lecture 8: Drawing Quadratic Curves

Lecture 9: Drawing Bezier Curves

Lecture 10: Lab Session: Drawing a Heart

Chapter 3: Drawing Shapes on Canvas

Lecture 1: Drawing Rectangles

Lecture 2: Lab Session: Drawing a Chessboard

Lecture 3: Drawing Circles

Lecture 4: Lab Session: Drawing a Pac-Man

Lecture 5: Lab Session: Drawing Polygons

Lecture 6: Shadows on Shapes

Chapter 4: Drawing Texts on Canvas

Lecture 1: Drawing Basic Texts

Lecture 2: Styling Texts

Lecture 3: Lab Session: Drawing 3D Texts

Lecture 4: Positioning Texts

Lecture 5: Shadows on Texts

Chapter 5: Project : Building a Open Source Bar Chart Library

Lecture 1: Creating Project Structure

Lecture 2: Creating the Chart Configurations

Lecture 3: Creating the Canvas and Performing the Pre-Operations

Lecture 4: Drawing Axes

Lecture 5: Drawing Labels

Lecture 6: Drawing Guidelines

Lecture 7: Drawing Bars

Lecture 8: Pushing to GitHub

Lecture 9: Readme.md

Chapter 6: Drawing Images on Canvas

Lecture 1: Drawing Images

Lecture 2: Lab Session: Drawing Pokemon Characters From A Tile

Lecture 3: Lab Session: Filtering Images

Chapter 7: Canvas Advanced Topics

Lecture 1: save() and restore() the canvas state

Lecture 2: Save Canvas as an Image

Lecture 3: Patterns

Lecture 4: Gradients

Chapter 8: Animations

Lecture 1: Animation Basics

Lecture 2: Lab Session: Bouncing Ball

Lecture 3: Sprite Animation

Lecture 4: Lab Session: Running A Game Character

Chapter 9: Transformations on Canvas

Lecture 1: Scale

Lecture 2: Rotate

Lecture 3: Translate

Lecture 4: Transform

Chapter 10: Making Physics with Animations on Canvas

Lecture 1: Introduction

Lecture 2: Velocity

Lecture 3: Acceleration

Lecture 4: Vertical Projection

Lecture 5: Horizontal Projection and Angular Projection

Lecture 6: Momentum on One Axis

Lecture 7: Momentum on Two Axes

Chapter 11: User Interactions on Canvas

Lecture 1: Handling Key Events

Lecture 2: Handling Mouse Events

Lecture 3: Lab Session: Juggling a Ball with Mouse

Lecture 4: Lab Session: Dragging and Dropping Canvas Objects

Chapter 12: Project : Building a Flappy Monster Game

Lecture 1: Creating Project Structure

Lecture 2: Creating the Game Class Part 1

Lecture 3: Creating the Game Class Part 2

Lecture 4: Creating the Background

Lecture 5: Creating the Score Board

Lecture 6: Creating the Walls

Lecture 7: Creating the Monster

Lecture 8: Collision Detection and Final Touches

Lecture 9: Fix: Walls Overlap Issue Fixed

Chapter 13: Project : Building Paint Application

Lecture 1: Project Design Overview

Lecture 2: Handling Color and Brush

Lecture 3: Drawing on Canvas

Lecture 4: Clear and Download Drawings

Chapter 14: End of Journey

Lecture 1: What's next?