Animating the Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 3

Released on April 20th 2017
Length: 32:07

This episode covers skill number three of becoming a canvas pro: Animating Canvas Elements. From animation basics, object oriented JavaScript, and random number generation, this episode comprehensively covers everything you'll need to know to get your objects moving on the screen. I intentionally excluded an intro from the beginning of this video for a couple reasons: one, the video is already ~35 minutes long— adding any additional content would be pushing when it comes to the video's length. Two, since these tutorials are meant to be part of a series, it makes sense to start the user at the exact position they left off within the last episode. I'm still doing a lot of experimentation in regards to what video organizational structure I like, but would love to gather feedback as well. Let me know what structure you prefer, and I'll be sure to take it into consideration, thanks! Video Timeline: ----------------------------- 01:26 - Animation with requestAnimationFrame 04:56 - Clearing the canvas with clearRect 06:22 - What is velocity? 07:15 - How to bounce our objects off the edges of the screen 11:26 - Creating randomization (x, y coordinates and dx, dy velocities) 14:48 - Intro to object oriented JavaScript 23:58 - Creating multiple circle objects, and storing them in one variable 26:30 - Drawing and animating all of our circles using a for loop, array, and object oriented programming 28:25 - How to ensure circles are only being spawned within the canvas's boundaries The Platform: ------------------------- 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 and future videos, join the Chris Courses mailing list at Chris Courses Social: ------------------------------------- Twitter: Facebook: Christopher Lis Social: --------------------------------------- Twitter: CodePen: Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre