HTML5 Canvas Tutorial for Beginners | An Intro to Becoming a Pro - Ep. 1

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

Down to code some sick nasty interactive animations? Let me show you how.

HTML5 canvas easily generates interest to what would be a boring ass website. It's what allows us to create generative art that is simply impossible to recreate by hand. With a little bit of coding, we can animate and interact with this art, creating wonders of beauty that are truly unique to the medium of digital technology.

In this multi-part tutorial series, we cover four essential skills for any HTML5 canvas piece:

1. Creating and Resizing Your Canvas
2. Drawing Elements
3. Animating Elements
4. Interacting with Elements

If you want to become an HTML5 canvas pro, these four skills will provide a rock solid foundation to build upon.

In this episode, we cover skill number one: creating and resizing your canvas. Follow along and you'll be cranking out interactive wonders in no time.

Video Timeline:

0:17 - What is HTML5 canvas and why would we want to use it? 01:35 - The Four Essential Skills for any HTML5 canvas piece 02:46 - Screencast tutorial begins 05:14 - Creating the canvas 06:33 - Resizing the canvas 11:48 - How to draw on the canvas

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 Instagram: https://www.instagram.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=EO6OkltgudE