D4mations.com

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



🚀Support Chris Courses with Patreon: https://www.patreon.com/chriscourses
🖥Professional Web Development Services from Chris: https://resovere.com/

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

Original source

d4mer

, , , , , , , , , , , ,

49 responses to “HTML5 Canvas Tutorial for Beginners | An Intro to Becoming a Pro – Ep. 1”

  1. Thank you for making the playlist for these HTML5 Canvas courses. The BEST break down I've seen so far! You explain the reasoning behind the code so clear.

    Your website is amazing! Will you ever do video tutorials for WebGL or three.js?

  12. Hello, I am having a slight issue. When I use:
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    even after setting body { margin: 0} in the CSS, i still get a canvas which expands beyond my view to the right and the bottom, therefore creating scroll bars.

    Is this the same issue for all, or just me?

  26. Nice video, but I think you are missing what most newbie people like me would like to know, and that: "Can we use other html tags withing the canvas? And if so, which on we can and which one we cant?" . It does matter, since I was looking for a way to animate and make cool ways without using some framework or library. And most animations or so are about the already existent html tags as divs p`s and so on . Ideally to make it part of an php loop and back and fort 🙂

  27. Hey there, could you help me with this? I have the same code as yours for the js part. It works even but I get errors like document not defined and window not defined. Just wanted to know why they aren't working. BTW, I am using Brackets as my editor….

  42. I've been looking through tutorials for a while now and can't quite find the answer, maybe someone can help. If I want to make a div with multiple tabs where an animation runs before the text for each tab appears (Ie, a glowing button animation or animated line going from the button to the tab and then the text fades in etc) what would I use? html5 or css3?

  45. I have a quick question… if a have created a website and styled it using css and just have white space for the canvas can i do that? you said about canvas needing HTML and JS files can it also have a CSS file? I'm trying to simulate a solar system using canvas and JS and it needs to be accurate do you recommend using canvas or no?

Leave a Reply