Interacting with The Canvas | HTML5 Canvas Tutorial for Beginners - Ep. 4

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

Animating our canvas is cool and all, but we can take things one step further by adding some code that'll allow users to interact with our canvas's objects.

Adding interactivity to our canvas pieces creates a sort of surprise that web users don't normally expect. Look around the web, how many sites can you list off that include some sort of interactive art piece that meshes with the site's overall look and feel? Probably not many.

In regards to making your site stand out from the rest, there's no better solution than adding an interactive design. Learn how, within this episode of Chris Courses.

Note: Apologies for the many fades throughout, to be transparent, I messed up more than a few times during recording. Want to ensure I'm getting these videos out on time and have a limited schedule due to work, but nevertheless, hoping you enjoy the video and get some useful knowledge out of it.

Video Timeline:

00:40 - Where we left off 01:07 - Event listeners explained 03:15 - Introduction to the event object / argument 05:33 - Growing our circles 09:02 - Shrinking circles that aren't near our mouse 10:20 - Restricting the growth of the circles 12:18 - Randomizing the colors of our circles 17:54 - Randomizing the initial size of our circles 20:30 - Additional aesthetic improvement 21:16 - Making the canvas responsive to the browser 24:35 - Kuler and choosing color palettes

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=vxljFhP2krI