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

NEW: Canvas Image Manipulation course only at https://chriscourses.com/courses/image-manipulation/introduction

🚀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:
-------------------------------------
Twitter: https://twitter.com/chriscourses
Facebook: https://www.facebook.com/chriscourses
Christopher Lis Social:
---------------------------------------
Twitter: https://twitter.com/christopher4lis
CodePen: http://codepen.io/chriscourses
Beats:
-------------
Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre

Видео Drawing On the Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 2 канала Chris Courses