• Monday , 1 June 2020

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

Code Canyon

🚀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

Joakim Karud – Looking To The Sky w/Peter Kuli & Kasey Andre

Original source

3d Ocean

Related Posts


  1. Ms. A
    December 19, 2018 at 00:48

    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?

  2. Sanjaya Senarathane
    December 19, 2018 at 00:48

    I''m having the same issues while resizing. Any updated help?

  3. shariful islam
    December 19, 2018 at 00:48

    Wow! What a tutorial it is. It's too much beautiful. Thank you so much.

  4. Neha Rika
    December 19, 2018 at 00:48

    thank God that I came across this playlist….as I hv to make a project…
    thanks a lot!!!!!😊😊

  5. gokul hussey
    December 19, 2018 at 00:48


  6. Nour Bou Nasr
    December 19, 2018 at 00:48

    awesome tutorial thanks man

  7. Zach Titan
    December 19, 2018 at 00:48

    I have a problem. It says " TypeError : Cannot set property 'width ' of null at Index.js:2 I need help what is wrong with it plz respond I need help

  8. Cyclone
    December 19, 2018 at 00:48

    JavaScript doesn't require the semicolon after every line… It's a common mistake though it still runs with the semicolons

  9. TTC Blaze
    December 19, 2018 at 00:48

    I made a thing where i can enter numbers in a textbox and choose where the square shows up! Great tutorial!

  10. Damilola Randolph
    December 19, 2018 at 00:48

    I did height = 100vh
    width = 100vw

    did the trick

  11. Rentex Stauss
    December 19, 2018 at 00:48

    Can you make a video about a Snake game?🤙🏻🔥🔥

  12. sshah93
    December 19, 2018 at 00:48

    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?

  13. Mimi the Artist
    December 19, 2018 at 00:48

    Thank you for an excellent beginners tutorial!

  14. shiva shankar reddy thatiparthi
    December 19, 2018 at 00:48

    chris i want to know which framework did you used to create your website

  15. LogoMonic Learning
    December 19, 2018 at 00:48

    hey Chris! I'm lovin your courses

  16. RDGT
    December 19, 2018 at 00:48

    in which software u are write codes?

  17. pileage international
    December 19, 2018 at 00:48

    what theme are you using for sublime text??
    Edit: nvm i think i found it? is it Afterglow? 🙂

  18. ismet glu
    December 19, 2018 at 00:48

    Hi, how to make this effect https://www.awwwards.com/inspiration/58aea0a7e1382371dc47ab23

  19. Anonymous
    December 19, 2018 at 00:48

    Too quiet

  20. Sebastian
    December 19, 2018 at 00:48

    My HTML Canvas JS code doesn't get recognized. So I get errors like "canvas.getContext('2d')" is not a function. Please help!

  21. hellochriis
    December 19, 2018 at 00:48

    Why do you treat variables like objects? From my basic JS 101 knowledge, I recall object properties are accessed by object.property. But you do it on variables like canvas.getContext. Totally confused now.

  22. Mayank Arora
    December 19, 2018 at 00:48

    You just earned a subscriber boy 😀

  23. nmsl姐姐
    December 19, 2018 at 00:48


    December 19, 2018 at 00:48

    Thanks Chris 😊

  25. Go Mo
    December 19, 2018 at 00:48

    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 🙂

  26. Siddhanth Bhowmick
    December 19, 2018 at 00:48

    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….

  27. GRim Jay
    December 19, 2018 at 00:48

    love your videos bro ,, keep up the good work

  28. Nomad Boy
    December 19, 2018 at 00:48

    What if i want width like in px. not full width.

  29. kumbackquatsta
    December 19, 2018 at 00:48

    can you embed a custom canvas via embed code, like save coordinates of layout, and then render them where embedded?

  30. Snowden
    December 19, 2018 at 00:48

    My height and width are taking into account the size of the scroll bars, so it is making the canvas too big. What do?

  31. ord3n
    December 19, 2018 at 00:48

    How dit u set up your sublime?
    My doesn't know fillRect or something.

  32. José Pereira
    December 19, 2018 at 00:48

    That MrSuicideSheep subscription. 🙂

  33. Kishan Kumar
    December 19, 2018 at 00:48

    This video is casting me into becoming an HTML Javascript developer. I am a loving it, will continue learning from all your videos. 👍

  34. Lucas L
    December 19, 2018 at 00:48

    I was making good traction on this course until I started browsing r/place for 45 minutes

  35. frozendonut bf
    December 19, 2018 at 00:48

    Why wouldnt you just use p5.js for this as it makes both drawing shapes and making animations a lot easier?

  36. 李蛇
    December 19, 2018 at 00:48

    canvas default background-color is not white

  37. Abhinav Sharma
    December 19, 2018 at 00:48

    You my friend are the real MVP here. Yes you are.

  38. Dj2xP
    December 19, 2018 at 00:48

    Did this exactly and my browser window had slider bars top and bottom.. :/
    And yes, also in chrome, yes I recreated it exactly.

  39. Deevannagari Ajith
    December 19, 2018 at 00:48

    hey! I want you to make one small tutorial that how to get that autocomplete in sublimetext for javascript and all..!

  40. Eric
    December 19, 2018 at 00:48

    thank you thqnk ou tank you 🤟🏼

  41. Goaticorn
    December 19, 2018 at 00:48

    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?

  42. Wanted! #Santheep
    December 19, 2018 at 00:48

    Great video

  43. Michael Scott
    December 19, 2018 at 00:48

    nice video but why did you not use 100vh and 100vw for the with and height in css?

  44. Lucy Clare
    December 19, 2018 at 00:48

    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?

  45. Paweł Nobis
    December 19, 2018 at 00:48

    So clearly explained, great job Chris!

  46. hamza ahmad naim
    December 19, 2018 at 00:48

    Best Canvas Tutorial in Hindi/Urdu subscribed New this channel

  47. Surya Santosh
    December 19, 2018 at 00:48

    Çan anyone explain why the red colour of the canvas got disappeared after doing c.fillRect code

  48. Prasad Bobby
    December 19, 2018 at 00:48

    Sir i need the start shower and automatic firework launcher source code. So plz we put in the link in this comment

Leave A Comment

You must be logged in to post a comment.