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

Learn how to use canvas to build your own games at

🚀Download the free HTML5 Canvas cheat sheet at
📸Gear I used to produce this video:

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:
————————-
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

Chris Courses Social:
————————————-
Twitter:
Facebook:

Christopher Lis Social:
—————————————
Twitter:
CodePen:

Beats:
————-
Joakim Karud – Looking To The Sky w/Peter Kuli & Kasey Andre