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

Learn how to use canvas to build your own games at https://chriscourses.com/courses/javascript-games/videos/javascript-games-for-beginners

🚀Download the free HTML5 Canvas cheat sheet at https://chriscourses.com/cheatsheet 📸Gear I used to produce this video: https://kit.com/chriscourses/chris-courses-studio-setup

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.

Video Timeline:

00:19 - What can we draw with canvas? 00:56 - Charizard 01:30 - Screencast tutorial begins 02:12 - How to draw lines on the canvas 04:35 - How to add colors to your shapes and lines 07:08 - How to create an arc / circle with canvas 10:33 - Creating multiple shapes with a for loop 12:28 - Randomizing your objects' locations

Video Resources:

How to draw various canvas elements: http://www.html5canvastutorials.com/ Khan Academy Radians Tutorial: https://www.khanacademy.org/math/algebra2/trig-functions/intro-to-radians-alg2/v/introduction-to-radians

The Platform:

http://chriscourses.com is a platform in progress whose goal is to educate aspiring and seasoned web developers via story driven learning.

Each course tells a different story, and each milestone reveals a different scene. With an expansive universe to explore, you can track your progress, and gain the necessary skills needed to build your dreams.

For updates on the progress of chriscourses.com and future videos, join the Chris Courses mailing list at http://chriscourses.com.

Chris Courses Social:

... https://www.youtube.com/watch?v=83L6B13ixQ0