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

Released on April 6th 2017
Length: 14:55

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, it’s very important that you learn these four skills so you can build a solid foundation that’ll support you through the creation of any complicated canvas piece. In this episode, we cover skill number one: creating and resizing your canvas. It’s very important that we know how to perform this simple task, because first, we need a canvas that we can draw on, and second, we need to know how to resize this canvas based on our project’s needs (whether it’s required that the canvas be the full width or height of the screen, etc). Follow along and we'll have you 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/christopher4lis Beats: ------------- Joakim Karud - Looking To The Sky w/Peter Kuli & Kasey Andre