HTML5 Canvas Tutorial for Beginners

Released May 20, 2018

In the last episode, we covered skill number one of how to become a canvas pro: Creating and Resizing Your Canvas. We also improved our drawing skills by learning how to draw a very basic rectangle on the screen.

The end goal here is to create amazing interactive visuals, but there’s only so much we can create with just rectangles and squares. To get the most out of our canvas pieces, we first need to understand the full extent as to what objects we can draw and how to draw them.

To name some, with canvas we can draw:

  1. Rectangles -
  2. Lines -!
  3. Arcs / Circles -
  4. Bezier Curves -
  5. Images -
  6. Text -

For the sake of time, we won't be covering all of these shapes, but we will learn how to code those that are used the most: rectangles, lines, and arcs.

Once we get a grasp on how to draw these three shapes, I’ll show you how to efficiently create hundreds of these shapes at a time using only a couple lines of code. So without further adieu, let’s get to work, and cover skill number two: Drawing Shapes.

4 Lessons

1:30:53 hours

Skill Level



Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.