Premium Features

Download Video

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

Published 5 years ago

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.


Want to participate?

Create a free Chris Courses account to begin

harp34 posted a year ago
chris posted a year ago
harp34 posted a year ago
Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.