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

Released on April 6th 2017
Length: 14:55

HTML5 canvas is an HTML tag that creates an empty slate for you to draw on. Once you’ve drawn some elements on the canvas, you can do some really cool things such as animate the elements and even interact with them based on your mouse’s positioning. In this multi-part tutorial series, we cover The 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 we want to become an HTML5 canvas pro, it’s very important that we learn these four skills so we can build a solid foundation that’ll support us through the creation of any complicated canvas piece. In this episode, we cover skill number one of becoming an HTML5 canvas pro: 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 in this HTML5 canvas tutorial for beginners, as I take you step by step through the process of building the foundation you’ll need to become an HTML5 canvas pro. 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