Premium Features

Download Video

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

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.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login
d
diegohmac posted 4 years ago

How to make the lines from the objects (line, rect, circle, etc) become sharp? I'm trying it here but all I'm getting is blurry strokes...

Chris, could you help me solve this please?

0
d
diegohmac posted 4 years ago

How to make the lines from the objects (line, rect, circle, etc) become sharp? I'm trying it here but all I'm getting is blurry strokes...

Chris, could you help me solve this please?

0
h
harp34 posted 5 years ago

how to create a range in math.random? 10 - 500?

0
chris posted 5 years ago

Need a little bit of Math.random() trickery here. This'll produce the result you're going for:

const random = Math.random() * 490 + 10

Any number 0 - 490, then if you hit the low end, in this case 0, 10 will be added onto it. If you hit the high end, 490, 10 will be added onto it. The equation is essentially:

const random = Math.random() * (max - min) + min
0
h
harp34 posted 5 years ago

where is the khan academy link?

0

Providing the lift to launch your development career

© 2026 Chris Courses. All rights reserved.