Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Get Creative With The HTML5 Canvas
Introduction & Getting Started
Welcome (2:47)
Bonus: Download reference sheet
What is the HTML5 Canvas? (4:10)
Canvas Basics
Setting up the canvas (6:54)
Scripting & drawing rectangles (10:00)
Understanding the canvas co-ordinates (2:19)
Lines & paths (11:48)
Line widths & matching to pixels (5:22)
Corners & miters (6:51)
Arc's & circles (9:26)
Adding canvas text (7:43)
Removing sections of the canvas (6:24)
Gradients (9:21)
Adding images to the canvas (9:27)
Patterns & shadows (8:23)
Stepping It Up
Bezier & quadratic curves (10:10)
Save & restore (6:39)
Scale, rotate & translate (5:04)
Canvas transformations (7:28)
Working with pixels (10:30)
Challenge intro: Converting images to greyscale (3:17)
Challenge: Converting images to greyscale (9:43)
Looping (9:49)
Animating (5:29)
Project
Project intro (1:26)
Let's have some fun: Draw Mickey Mouse! (7:11)
Thank You
Thank you (2:10)
Keep on learning
Teach online with
Arc's & circles
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock