Search Courses

HTML5 Canvas: From Noob to Ninja - an interactive deep dive

Name: HTML5 Canvas: From Noob to Ninja - an interactive deep dive
Author: Kirupa Chinnathambi

Estimated completion time: 9h

Certificate Included

course by:

Kirupa Chinnathambi

113

Lessons

Playgrounds

188

Code Snippets

107

Illustrations

Course Overview

Kirupa is an MIT grad who works at Microsoft as Senior Program Manager. He has been tinkering with web technologies since 1998. He works on the Edge browser team where he gets to sink his teeth into the cutting-edge web technologies. HTML5 is taking over the browsers and one of the coolest things in HTML5 is the canva...

See more

Contents
Learning Experience
Course Contents
1. DOM vs. Canvas
DOM vs. Canvas
When to Use Which?
Summary
Further Reading
2. Getting Started with the Canvas
Getting Started with the Canvas
Meet the Canvas Element
Drawing Things
Conclusion
3. Drawing Basics / Lines
Canvas Drawing Basics
How Drawing in the Real World Works
Drawing in the Canvas World
Conclusion
4. Drawing Curves
Drawing Beziér Curves on the Canvas
Drawing a Quadratic Beziér Curve
Drawing a Cubic Beziér Curve
Conclusion
5. Drawing Multiple Things
Drawing Multiple Things
This Seems Simple, No?
Creating an Individual Shape
Draw Order Matters
Conclusion
6. Drawing Rectangles (and Squares)
Drawing Rectangles (and Squares) on the Canvas
Drawing Rectangles
Conclusion
7. Drawing Triangles
Drawing Triangles on the Canvas
Drawing Triangles
Conclusion
8. Drawing Circles
Drawing Circles on a Canvas
Meet the Arc Function
Displaying the Circle
Conclusion
9. Modifying How Your Corners Look
Modifying How Corners Look
Meet the lineJoin Property
Conclusion
10. Working with Colors
Working with Colors
Colors, strokeStyle, and fillStyle!
Specifying Gradients
Conclusion
11. Drawing Text
Drawing Text on the Canvas
From Text to Pixels
Conclusion
12. Drawing Images
Drawing Images on the Canvas
Images and drawImage()
Displaying an Image
Scaling the Image
Slicing an Image
Conclusion
13. Canvas Transformations
Canvas Transformations
Meet the Transformation Methods
Undoing Transforms
Conclusion
14. Structuring Your Drawing Code
Structuring your Drawing Code
Using Functions
Using Objects
Conclusion
15. Animating with requestAnimationFrame
Animating with requestAnimationFrame
Meet requestAnimationFrame
Using This Magical Function
Simple Example
Your Frame Rate
Stopping Your Animation Loop
The Timestamp Argument
Conclusion
16. Creating Animations on the Canvas
Creating Animations on the Canvas
Animation 101
Animating on the Canvas
Implementation Time
Conclusion
17. Animating Many Things on the Canvas
Animating Many Things on a Canvas
Deconstructing the Example
Conclusion
18. Creating Motion Trails
Creating Motion Trails
The Basic Approach
Creating the Motion Trail
Conclusion
19. Creating Sprite Animations
Creating Sprite Animations on the Canvas
The Sprite Sheet
How All of This Works
It's Coding Time!
Conclusion
20. Working With the Mouse
Working with the Mouse
The Mouse and the Canvas
Getting the Exact Mouse Position
Conclusion
21. Follow the Mouse Cursor
Follow the Mouse Cursor
The Basic Approach
Conclusion
22. Mouse Follow with Ease
Mouse Follow with Ease
Here's the Code
Conclusion
23. Working With the Keyboard
Working With the Keyboard
Meet the Keyboard Events
Using These Events
The Keyboard Event Properties
Some Examples
Conclusion
24. Moving Shapes Using the Keyboard
Moving Shapes on the Canvas Using the Keyboard
The Basic Approach
Displaying Our Triangle
Dealing With the Keyboard
Adjusting the Position
Preventing Default Keyboard Behavior
Improved Keyhandling Logic
Conclusion
25. Resizing the HTML Canvas Element
Resizing the HTML Canvas Element
Why CSS Doesn't Work
Properly Resizing your Canvas
Why the Weird Behavior?
Conclusion
26. Detect Whether a Font is Installed
Detect Whether a Font is Installed
Grab the Code
Overview of the Code
Conclusion
How you will learn?
Faster than videos
Videos are holding you back. The average video tutorial is spoken at 150 words per minute, while you can read at 250. That's why our courses are text-based.
Hands-on coding environments
You don’t get better at swimming by watching others. Coding is no different. Practice as you learn with live code environments inside your browser.
No set-up required
Start learning immediately instead of fiddling with SDKs and IDEs. It‘s all on the cloud.
Progress you can show
Built in assessments let you test your skills. Completion certificates let you show them off.