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
