HTML5 Canvas Tutorial for Complete Beginners

[@The_Pariah]

4:40 in the morning. Hella insomnia. Tired of watching tv shows. Decided to enrich my life and bone up on canvas. Thx for taking the time to make these vids. You the real MVP.

[@abhayrohit]

*Really Important Note for future visitors* Setting size with css doesn't only result in the aforementioned issue but also if we set dimensions with css, the canvas just scales up from its default resolution which is 300px something, try putting an image in the canvas when you set css dimensions, it will be pixelated like shit, and thats the main reason we have to set the width height with javascript

[@sfarzortee]

I think this is the best tutorial channel I have ever come across.

[@avi12]

7:09 You can set the width & height through CSS as well. As you said, the isn't taking the entire height, and as you know - you can interact with any tag using CSS I.e. : html { height: 100%; } To ensure that the canvas truly expands to the page's height, you need to remember the as well, so: html, body { height: 100%; } If you want the width as well (and I'm sure you can tell that the width isn't realy 100%, but more like 90%), you can do: html, body { width: 100%; height: 100%; }

[@speedylog46]

why write too many lines just: *{ margin:0; padding:0; } // and then canvas{ width: 100vw; height:100vh;} simplle

[@threeone6012]

This is the best tutorial I have ever taken. 4 videos of pure awesome! Thank you Chris!

[@ChrisCourses]

This is up there with some of the best compliments I've ever received, thank you!

[@sherylbee8634]

Wow, you are a FANTASTIC teacher. You literally left nothing to assumption. Thank you so much for sharing your knowledge, skill and talent! 👍🏾👍🏾👍🏾

[@Vistouf]

I really like how this tutorial holds your hand even for the basic file creation. It shows you're going to keep holding my hand for the parts of the tutorial I really need!

[@imoto123]

exactly my thought! Have you gone through entire playlist?

[@theman7050]

King of Canvas!

[@ChrisCourses]

Like the sound of that 😤👑

[@learner801]

Best tutorial that I came across for CANVAS! Even after 6 years WOW! Thank you so much, you explained it so well!

[@mrmbeautiquethebrand]

One Thing Is Your Video Is. You Are Very Genuine person.

[@abhinavs03]

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

[@OlaG-el9zr]

Even before watching, I already know this tutorial will be quality so lemme pay my dues by dropping a comment, affording a like, and finally subscribing.

[@jalq1978]

Awesome Chris. Thanks for taking your time.

[@TransparentGel]

Subscribed, every video is amazingly in-depth and super clear. Hope your channel keeps growing and you keep producing quality content like this. Love from Portugal.

[@ChrisCourses]

Awesome, glad to hear it, definitely going to keep producing what I believe to be quality content and hope that it continues to grow 😎

[@sidhantmanchanda]

Not going anywhere ! Great work

[@SongOfTheCrane]

When following along with this tutorial, I encountered an issue where my body was always larger than the actual window.innerHeight, causing scroll bars to be enabled. I finally found that changing the body CSS to also include 'display: flex' resolved my issue. (This was occurring in both Firefox and Chrome, the display mode by default was 'block'.) Hoping to save someone some time, haha.

[@sidheshwartiwari9834]

Thats not a good idea... As it will display everything in a row or column.. you should rather put height 100vh to the body

[@ytubeleo]

Me too. It's so weird, a bug I guess. Very interesting that display:flex fixes it. I've found this also works: And: canvas.width = window.innerWidth-2; // to compensate for 1px border canvas.height = window.innerHeight-2;

[@eduardoo31]

i was having the same problem. thanks!

[@bardiaeskandarian8224]

goood job bro i had same problem but with your comment i've solved my problem 😍😍

[@HigkeyRegarded007]

@@ytubeleo Thanks so much for this! 2 years later and its still helpful! Awesome work!

[@ifecojahs8151]

You are the greatest teacher I have ever met or seen anywhere! Thanks Bro!

[@ranjandeb6739]

Awesome, I was looking for HTML graphics related courses, and yours is the best I've found so far. Thank you for your awesome work.

[@erielh]

this was genuinely such a great tutorial. i was so anxous over a team work related to js & canvas i have to do for uni and this is genuinely a lifesaver. you explain things very clearly and i feel like i learnt a lot haha. thank you! have an awesome day

[@MrRayinsf]

The best tutorial on Canvas (paid or free) that I have experienced. Clear, concise, and fun.

[@theSunflowerPlug]

Studying for Microsoft 70-480 exam and video has definitely been the best I've seen. Thanks for the great walkthrough.

[@antoniodesousa1731]

Absolutely brilliant tutorial series! Just sad there wasn't more, but look forward to whatever videos you add to this series! Excellent work, and many thanks!

[@stevelyon747]

Great job on these tutorials! They're engaging and I'm learning a lot. Thanks, bud.

[@aionair77]

Awesome! these episodes are just what I needed! Thank you!

[@kishannr911]

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

[@DementedBeast]

you should try a full stack. if you want mostly this, try the MEAN stack. (MongoDB, ExpressJS, AngularJS, NodeJS) m.e.a.n. anyway it will provide a full stack while working soley with front end stuff except the db. anyway. then learn how to build it into an app with electron, bam fully cross platform or standalone or web hosted.

[@jimmyciaston7733]

Hands down one of , if not the best javascript series out there . You take your time and explain everything in an easy and precise way . Thank you sir

[@SAlmanKhanDev]

Very straightforward Chris, great video, subbed!!

[@smn2542]

Such a good tutorials!! Thank you. I am so so so happy I found your channel.

[@rommellobiano2221]

"A canvas element, what a surprise, a canvas element for a canvas course." LMAO made me subscribe

[@misterperfecttube5377]

This is unlike every other development tutorial... I find this engaging as well as "not boring" as the other turorials on youtube... just wanted to say, for me your content stands out dude. Thanks a lot

[@Aziz00747]

Wow! this is so cool. Can't wait to finish the rest of the courses.

[@brianwilliam1642]

Whoa, this is awesome! Go Chris!

[@sharifulislam-pd3sj]

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

[@viniipelomundo]

Thank's a lot !! I'm from Brazil and here we don't have good content like yours.

[@ezechinedu4867]

You are the best tutor i have seen so far on this. Thanks a lot😘

[@TechSquidTV]

Great video. Love the new Intro of course.

[@ChrisCourses]

Thanks man, your latest one on CSS is great too, enjoyed it.

[@prashansapriya5963]

Wow it was simply awesome ❤️ so precise and informative video

[@ChrisCourses]

Thanks for watching, appreciate the support!!

[@skill.mp4527]

for those who is having scrollbar problems, i've set the canvas' display to block, because its standard is display: inline, it worked for me and i hope to save someone with this same problem

[@pawenobis5386]

So clearly explained, great job Chris!

[@ChrisCourses]

Glad you think so Pawel, thanks!

[@ReviewGame10]

Best HTML Canvas tutorial thanks

[@junolea7371]

Those people who thumbs down, are you all that jealous? Thanks Chris! You explain so well!

[@dagamememer2445]

I love these tutorials

[@joaofnds]

looking forward for the next tutorials, thanks Chris!

[@ChrisCourses]

Thanks Joao, been with me since the start, truly appreciate it man.

[@RealRameshBabu]

Clear explanation and easy to understand Subbed this channel

[@rohitj1252]

one will have to set h and w through js , can't do it with css(not even 100vh) else animation won't showup. also for scroll just remove the border, or have to minus its dimention in h,w. good tutorial. watching other now

[@endeesecreative521]

I would recommend using width: 100%; height: 100vh; That way you're using the full width of the screen and also the entire viewport height. Separating styles from JS is best practice.

[@GogurtTheFirst]

I'm glad I found this playlist and your channel. You have some well put together videos. Keep the content coming!

[@mysteriouswarrior2995]

Awesome, I'm really glad I found the perfect playlist to learn canvas. Now I am more motivated to learn canvas. Canvas was overflowing so I make it fixed for now.

[@jcbongaitan612]

love your videos bro ,, keep up the good work

[@gektorix]

Just a comment to support the channel. Keep up the good work. Very interesting content.

[@leozeng6696]

That's amazing! I'm so glad and excited to watch it and learn canvas. Thanks for sharing. You're awesome!

[@supporterofeastturkestanin2871]

Thank you for these super amazing 12 canvas video series!

[@neozhan7650]

Great video for beginners, thank you Chris !

[@arunbm123]

Thanks for your videos, I wanted this course very badly.

[@bloomingirl]

this guy should be a teacher at school 🗣good job, you earned a sub

[@zlackbiro]

Simple solution is to always add the working

[@milindkhadse556]

Nice video tutorial. Thank you very much to upload. All playlist videos are awesome.

[@421prateek]

awesome explanation man!

[@ChrisCourses]

Thanks Rakesh!

[@sylvesterjengwa7941]

you deserve thumbs up million times great tutorial

[@ovweb5862]

Thank you! You are awesome.

[@80sGameGuy]

Thanks, that canvas element is pretty cool!

[@Tsmolad]

Never hit the subscribe button so fast the way i just did

[@Mimitheartist]

Thank you for an excellent beginners tutorial!

[@neharika6258]

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

[@henkhodryza1874]

Thank you... I love this series

[@robertcaluza9534]

for canvas width & height, in the css couldn't you just set the width and height to 100vw and 100vh, respectively?

[@ChrisCourses]

Hey Robert, someone asked me the same question earlier this week. For the initial canvas resize, resizing with CSS vh and vw properties will function the exact as resizing with the JS code in the video-it really just comes down to preference. Now, in order to ensure the canvas is always 100% of the browser window when the browser is resized, you'd have to give the canvas a parent element with a width and height of 100vw / 100vh. With JS, you throw the resize code in an event listener for browser resize, and it'll handle everything automatically, no parent element required. Both ways work, I just like being able to resize the canvas without requiring a parent element.

[@robertcaluza9534]

cool thanks for the quick response - i was wondering if there was a downside to setting the dimensions in css rather than js(functionality wise) again thanks for responding, can't wait for part II!

[@ChrisCourses]

Nope, there should be no downside that I'm aware of. Further down the course, you'll see how we handle dynamic browser resizing with JavaScript, but if you have things set up with CSS, there shouldn't be any noticeable difference functionality wise. Not a problem at all responding, glad I could help :)

[@barbarawiacek6557]

I came across scaling problems when I set the width and height with 100vh and 100vw in css. When I did that, the squares that I created with .fillRect() were stretched, not sharp and were not even squares anymore. Setting the width and height in javascript solved this.

[@yosoX]

The width and height attributes of a canvas element are different from its width and height style properties. The attributes set the logical dimensions that are being used for drawing. The style properties only manipulate the sizing of the element itself and will scale the content just like an image. This can cause blurry drawings or even mess up aspect ratios.

[@missoula2213]

Thank you! So far this is way better than the college course I am paying thousands of fucking dollars to take.

[@sureshcarpenter7797]

you are so good man thanks for making this tutorial keep it up useful

[@sweethomes674]

Excellent explanations 😊

[@ahlambeyoud1709]

your explanation skills are level 9000 :) great tutorial thank you very much !

[@neoliu3125]

I love your courses! Hope you will bring more tutorials in web animation!

[@gustavoleite7569]

instead of creating a variable for height and width in JS, you can use the CSS unit "height: 100vh and width: 100vw", it uses the total area of the user view

[@DavidsKanal]

I think it is worth mentioning that the Canvas2DRenderingContext isn't the only one obtainable through .getContext; WebGLRenderingContext and BitmapRenderingContext also exist. A is related to any of these contexts as much as it is to all others, and therefore I think it's wrong to present the Canvas2DRenderingContext as the "one and only" option here. Sure, it's easier than WebGL, but it's not any more "canvas" than other the contexts.

[@olegs77]

thank you! I watch it every time whenever I'm going to start some new project.

[@thomascarlton82]

Good stuff, thx for making these concepts easy to understand

[@christianteller661]

you're the best man keep making videos please.

[@ChrisCourses]

WISH GRANTED, THIS THURSDAY. THANKS MY DUDE!

[@dying3353]

You're taste in music is good as well

[@logomoniclearning6680]

hey Chris! I'm lovin your courses

[@andycheng9452]

super awesome, bro!

[@vladyslavkyiashko9753]

I had overflow with those styling in chrome, adding: position: absolute; left: 0; top: 0; solved this issue, also it's better to use vm and vh in css instead of innerWidth and innerHight, btw nice course :)

[@ytubeleo]

Me too. If I don't want to set position:absolute, I've found I have to do: And: canvas.width = window.innerWidth-2; // to compensate for 1px border canvas.height = window.innerHeight-2;

[@stormos25one]

Great Video as always!

[@ChrisCourses]

Big thanks to you as always too!

[@mytechjungle]

You are a great teacher. Awesome tutorials :)

[@whoami-so2hy]

veryy nice course my bro, please make more video. keep it up ^.^

[@BarneeeYx]

Thank you for this clear and understandable tutorial! Good job ;)

[@illDesign86]

Does work well on iOS and Android devices for these full-screen video like animations?

[@ChrisCourses]

Indeed it does, but you have to take certain precautions to ensure this. When we get to Part IV, Interacting with the Canvas, I'll be sure to describe every little detail you'll need to know to get these functioning beautifully on mobile. If you'd like to see some examples, check out my portfolio site on your phone-every piece on there should be mobile optimized. christopherlis.com/#/

[@mystreie]

wow, this is really cool! reaaally hope i can be as good as you ! i just followed your chanllenge your provided in the 2nd video and play with it, i did learn something there, thanks again Chris! just plz make some more videos, i cant wait ! xD

[@kbyebea]

never mind my question earlier, you answered this :)

[@Talel_kraiem]

this is hell awsome !!!

[@MayankArora]

You just earned a subscriber boy :D

[@davidpereira7938]

That MrSuicideSheep subscription. :)

[@ILAEnglishYT]

Great work! Thanks for these vids.

[@callmejobson]

Cool Im just getting started with canvas! I hoping I can use it for prototyping and making fun games!

[@pavel5515]

Cannot get over hearing Chris Griffin o' Family Guy talking about JS / Canvas. Then I see - the channel name is Chris Courses. Sounds like no coincidence :)

[@mdazam6477]

Excellent job

[@juhandvan]

Thank You for sharing your knowledge.

[@zell4412]

Learned so much thank you!!

[@MauFerrusca]

AH! A Focusrite USB interface, a man of quality.

[@nourbounasr553]

awesome tutorial thanks man

[@lucasl8495]

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

[@vinayraj2879]

Thanks Chris 😊

[@Jimi-bx3xf]

very good explanation !

[@adonisnguessan4032]

need the other half of the video!