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

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

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.

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:

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 ... https://www.youtube.com/watch?v=yq2au9EfeRQ