Drawing On the Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 2

April 13th 2017 | 69.7k views

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 - https://christopherlis.com/projects/amplify
  2. Lines - https://christopherlis.com/projects/its-alive!
  3. Arcs / Circles - https://christopherlis.com/projects/intertwined
  4. Bezier Curves - http://codepen.io/tholman/full/foxtn/
  5. Images - http://codepen.io/allanpope/pen/LVWYYd
  6. Text - http://codepen.io/sakri/full/mtlDu/

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.