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

Released on April 13th 2017
Length: 16:30

Alright, so looking back at the last episode, we covered skill number one of how to become a canvas pro: creating and resizing your canvas. We also covered the most rudimentary shape we can draw with canvas: the rectangle. Now the end goal here is still to create amazing visuals, but there’s only so much we can create with just rectangles and squares. To get the most out of our visuals, we need to first 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 which also create 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’re not going to be covering all of these within this course, but we will be covering those that are most widely used, which are the first three: rectangles, lines, and arcs. Once we have a solid foundation in regards to how to draw these three shapes, we’ll move into some programming 101, where I’ll show you how to efficiently create hundreds of these shapes at once using only a couple lines of code. So without further adieu, let’s get to work, and cover skill number two: Drawing on the canvas. 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/christopher4lis Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre