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
