Premium Features

Download Video

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

Published 8 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 - 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 2 years ago
0
d
diegohmac posted 2 years ago
0
h
harp34 posted 4 years ago
0
chris posted 4 years ago
0
h
harp34 posted 4 years ago
0

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.