HTML5 Canvas: From Noob to Ninja - an interactive deep dive
Learn HTML5 Canvas basics: draw shapes, apply transformations, add animations, and build interactive apps with advanced mouse/keyboard handling to create dynamic web graphics.
- 113 lessons across 26 modules
- AI Tutor on every lesson
Ever since my parents brought home a computer in the early 1990’s, I have enjoyed writing code and animating things on the screen. It’s one of my few childhood hobbies (besides crying when things don’t go my way and eating ice cream) that I still actively pursue. Let’s fast-forward a few years. In 1999, I decided to create a blog called kirupa.com (creative, right?) where I began to document tips, tricks, and other random information about how to use your computer to draw/create/animate and do cool things with it. Over the years, this little blog became one of the most popular places where web developers and designers came to learn more about Flash and other related technologies such as, most recently, the three musketeers: HTML, CSS, and JavaScript. In parallel, my offline activities have kept me busy as well. For my sins, I was sentenced to four years of rigorous imprisonment at MIT where I majored in Electrical Engineering and Computer Science. Shortly after graduation, as part of a work-release program, I joined Microsoft as a Program Manager on a team that is currently known as Visual Studio. When I am not writing or breaking things, I drink a lot of bubble tea, play video games, attend live music shows, set bonfires, watch movies, and hang out with friends. I’m pretty much the most awesome person that I know. I am currently working on being more modest.
Join 3.1 million developers at
What You'll Learn
- Differentiate DOM retained mode and Canvas immediate mode for rendering, redraws, and scene management
- Set up an HTML canvas element with correct sizing, styling, and JavaScript 2D context access
- Draw and style shapes with paths, beginPath/closePath, stroke/fill, and draw-order layering
- Render Beziér curves, rectangles, triangles, circles, text, images, and gradients using canvas APIs
- Apply translate, scale, rotate, and resetTransform to control the canvas transformation matrix
- Build smooth animations with requestAnimationFrame, timestamps, frame control, and cancelAnimationFrame
- Implement interactive mouse and keyboard controls with precise cursor coords and multi-key movement logic
Learning Roadmap
1.
DOM vs. Canvas
DOM vs. Canvas
2.
Getting Started with the Canvas
Getting Started with the Canvas
3.
Drawing Basics / Lines
Drawing Basics / Lines
4 Lessons
4 Lessons
4.
Drawing Curves
Drawing Curves
4 Lessons
4 Lessons
5.
Drawing Multiple Things
Drawing Multiple Things
5 Lessons
5 Lessons
6.
Drawing Rectangles (and Squares)
Drawing Rectangles (and Squares)
3 Lessons
3 Lessons
7.
Drawing Triangles
Drawing Triangles
3 Lessons
3 Lessons
8.
Drawing Circles
Drawing Circles
4 Lessons
4 Lessons
9.
Modifying How Your Corners Look
Modifying How Your Corners Look
3 Lessons
3 Lessons
10.
Working with Colors
Working with Colors
4 Lessons
4 Lessons
11.
Drawing Text
Drawing Text
3 Lessons
3 Lessons
12.
Drawing Images
Drawing Images
6 Lessons
6 Lessons
13.
Canvas Transformations
Canvas Transformations
4 Lessons
4 Lessons
14.
Structuring Your Drawing Code
Structuring Your Drawing Code
4 Lessons
4 Lessons
15.
Animating with requestAnimationFrame
Animating with requestAnimationFrame
8 Lessons
8 Lessons
16.
Creating Animations on the Canvas
Creating Animations on the Canvas
5 Lessons
5 Lessons
17.
Animating Many Things on the Canvas
Animating Many Things on the Canvas
3 Lessons
3 Lessons
18.
Creating Motion Trails
Creating Motion Trails
4 Lessons
4 Lessons
19.
Creating Sprite Animations
Creating Sprite Animations
5 Lessons
5 Lessons
20.
Working With the Mouse
Working With the Mouse
4 Lessons
4 Lessons
21.
Follow the Mouse Cursor
Follow the Mouse Cursor
3 Lessons
3 Lessons
22.
Mouse Follow with Ease
Mouse Follow with Ease
3 Lessons
3 Lessons
23.
Working With the Keyboard
Working With the Keyboard
6 Lessons
6 Lessons
24.
Moving Shapes Using the Keyboard
Moving Shapes Using the Keyboard
8 Lessons
8 Lessons
25.
Resizing the HTML Canvas Element
Resizing the HTML Canvas Element
5 Lessons
5 Lessons
26.
Detect Whether a Font is Installed
Detect Whether a Font is Installed
4 Lessons
4 Lessons
Kirupa Chinnathambi
By day, I work on making webapps rock @Microsoft! By night, I teach web stuff. I am also married to the awemazing @codekunoichi :P
Trusted by 3.1 million developers working at companies
Anthony Walker
@_webarchitect_
Evan Dunbar
ML Engineer
Software Developer
Carlos Matias La Borde
Souvik Kundu
Front-end Developer
Vinay Krishnaiah
Software Developer
Built for 10x Developers
Free Resources
