AI Features
Log In
0% completed
All Lessons
Free Lessons (5)
DOM vs. Canvas
DOM vs. Canvas
When to Use Which?
Summary
Further Reading
Getting Started with the Canvas
Getting Started with the Canvas
Meet the Canvas Element
Drawing Things
Conclusion
Drawing Basics / Lines
Canvas Drawing Basics
How Drawing in the Real World Works
Drawing in the Canvas World
Conclusion
Drawing Curves
Drawing Beziér Curves on the Canvas
Drawing a Quadratic Beziér Curve
Drawing a Cubic Beziér Curve
Conclusion
Drawing Multiple Things
Drawing Multiple Things
This Seems Simple, No?
Creating an Individual Shape
Draw Order Matters
Conclusion
Drawing Rectangles (and Squares)
Drawing Rectangles (and Squares) on the Canvas
Drawing Rectangles
Conclusion
Drawing Triangles
Drawing Triangles on the Canvas
Drawing Triangles
Conclusion
Drawing Circles
Drawing Circles on a Canvas
Meet the Arc Function
Displaying the Circle
Conclusion
Modifying How Your Corners Look
Modifying How Corners Look
Meet the lineJoin Property
Conclusion
Working with Colors
Working with Colors
Colors, strokeStyle, and fillStyle!
Specifying Gradients
Conclusion
Drawing Text
Drawing Text on the Canvas
From Text to Pixels
Conclusion
Drawing Images
Drawing Images on the Canvas
Images and drawImage()
Displaying an Image
Scaling the Image
Slicing an Image
Conclusion
Canvas Transformations
Canvas Transformations
Meet the Transformation Methods
Undoing Transforms
Conclusion
Structuring Your Drawing Code
Structuring your Drawing Code
Using Functions
Using Objects
Conclusion
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
Creating Animations on the Canvas
Creating Animations on the Canvas
Animation 101
Animating on the Canvas
Implementation Time
Conclusion
Animating Many Things on the Canvas
Animating Many Things on a Canvas
Deconstructing the Example
Conclusion
Creating Motion Trails
Creating Motion Trails
The Basic Approach
Creating the Motion Trail
Conclusion
Creating Sprite Animations
Creating Sprite Animations on the Canvas
The Sprite Sheet
How All of This Works
It's Coding Time!
Conclusion
Working With the Mouse
Working with the Mouse
The Mouse and the Canvas
Getting the Exact Mouse Position
Conclusion
Follow the Mouse Cursor
Follow the Mouse Cursor
The Basic Approach
Conclusion
Mouse Follow with Ease
Mouse Follow with Ease
Here's the Code
Conclusion
Working With the Keyboard
Working With the Keyboard
Meet the Keyboard Events
Using These Events
The Keyboard Event Properties
Some Examples
Conclusion
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
Resizing the HTML Canvas Element
Resizing the HTML Canvas Element
Why CSS Doesn't Work
Properly Resizing your Canvas
Why the Weird Behavior?
Conclusion
Detect Whether a Font is Installed
Detect Whether a Font is Installed
Grab the Code
Overview of the Code
Conclusion
Home
Courses
HTML5 Canvas: From Noob to Ninja - an interactive deep dive
Drawing Rectangles (and Squares) on the Canvas
We'll cover the following...
When drawing shapes on the
canvas
, you
...
Ask