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.
*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
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%; }
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.
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!
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
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.
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.
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
ok so now that we have a canvas.....is there a way for people to like... write or draw in it like specify a mouse draw input event listener or somethig like paint or something? maybe its in a farther vid i dunno, may be a dumb question. just a simple drawing box that doesnt save
For sure, keep making your way through the playlist-I cover interacting with inputs in episode four! Reference to the playlist for better viewing here: chriscourses.com/courses/canvas-for-beginners/resizing
DementedBeast awesome man, that’s a fantastic start. Feel free to hit me up on the Chris Courses forum if you need any assistance, will be sure to help you out 😎
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.
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
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
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.
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!
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 :)
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.
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.
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.
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.
Very easy to follow video, thank you :) But I do have one problem... My canvas takes up slightly more than the window height and width and that gives me scroll bars... Is it supposed to do that or could I have done something wrong?
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.
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!
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
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 :)
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;
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/#/
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
it probably are the borders if you still have those on in css. browsers put the border on the outset by default. but borders are not considered this particular java script code. this is why the css approach for an element that remains static is better kind of but that is preference in my regard.
I ran into the same issue and found that the problem is related to the display property of the canvas element. I solved this by removing the border of the canvas element and set the display of the canvas element to block. Another way to solve this is by setting the vertical-align property to middle. canvas { border: 1px solid black;
Quick question... Adobe Animate canvas: I drew a square, turned it into a movieclip and gave it instance name of box. I set it to invisible. I put the following code on the first frame: this.box.visible = true; After publishing, the box appears visible as expected (and invisible when the code is removed). HOW can I get that same code to execute from an external js file? The example is simply to let me see how to execute external script that effects the canvas' objects.
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 border property on canvas element cause scroll bars so remove the border on canvas element.
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 :)
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 :)
![*Next-door 10x Software Engineer* [FULL]](/img/n.gif)
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.
I think this is the best tutorial channel I have ever
come across.
*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
One Thing Is Your Video Is. You Are Very Genuine person.
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%;
}
why write too many lines just:
*{
margin:0;
padding:0; }
// and then
canvas{
width: 100vw;
height:100vh;}
simplle
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.
Thats not a good idea... As it will display everything in a row or column.. you should rather put height 100vh to the body
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;
i was having the same problem. thanks!
goood job bro i had same problem but with your comment i've solved my problem 😍😍
@@ytubeleo Thanks so much for this! 2 years later and its still helpful! Awesome work!
This is the best tutorial I have ever taken. 4 videos of pure awesome! Thank you Chris!
This is up there with some of the best compliments I've ever received, thank you!
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!
exactly my thought! Have you gone through entire playlist?
You my friend are the real MVP here. Yes you are.
King of Canvas!
Like the sound of that 😤👑
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
Wow, you are a FANTASTIC teacher. You literally left nothing to assumption. Thank you so much for sharing your knowledge, skill and talent! 👍🏾👍🏾👍🏾
Studying for Microsoft 70-480 exam and video has definitely been the best I've seen. Thanks for the great walkthrough.
Those people who thumbs down, are you all that jealous? Thanks Chris! You explain so well!
Best tutorial that I came across for CANVAS! Even after 6 years WOW! Thank you so much, you explained it so well!
"A canvas element, what a surprise, a canvas element for a canvas course." LMAO made me subscribe
Not going anywhere ! Great work
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.
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.
Awesome, glad to hear it, definitely going to keep producing what I believe to be quality content and hope that it continues to grow 😎
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
ok so now that we have a canvas.....is there a way for people to like... write or draw in it like specify a mouse draw input event listener or somethig like paint or something? maybe its in a farther vid i dunno, may be a dumb question. just a simple drawing box that doesnt save
For sure, keep making your way through the playlist-I cover interacting with inputs in episode four! Reference to the playlist for better viewing here: chriscourses.com/courses/canvas-for-beginners/resizing
@@ChrisCourses I just finished I think 3. Got my blue circle bouncing around and all that came before
DementedBeast awesome man, that’s a fantastic start. Feel free to hit me up on the Chris Courses forum if you need any assistance, will be sure to help you out 😎
Awesome Chris. Thanks for taking your time.
This video is casting me into becoming an HTML Javascript developer. I am a loving it, will continue learning from all your videos. 👍
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.
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
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
Wow it was simply awesome ❤️ so precise and informative video
Thanks for watching, appreciate the support!!
Just a comment to support the channel. Keep up the good work. Very interesting content.
Great job on these tutorials! They're engaging and I'm learning a lot. Thanks, bud.
for canvas width & height, in the css couldn't you just set the width and height to 100vw and 100vh, respectively?
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.
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!
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 :)
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.
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.
awesome explanation man!
Thanks Rakesh!
this guy should be a teacher at school 🗣good job, you earned a sub
Wow! this is so cool. Can't wait to finish the rest of the courses.
Clear explanation and easy to understand
Subbed this channel
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.
Very straightforward Chris, great video, subbed!!
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.
Best HTML Canvas tutorial thanks
love your videos bro ,, keep up the good work
You are the best tutor i have seen so far on this. Thanks a lot😘
Such a good tutorials!! Thank you. I am so so so happy I found your channel.
Thank's a lot !! I'm from Brazil and here we don't have good content like yours.
Awesome! these episodes are just what I needed! Thank you!
You are the greatest teacher I have ever met or seen anywhere! Thanks Bro!
Whoa, this is awesome! Go Chris!
Nice video tutorial. Thank you very much to upload. All playlist videos are awesome.
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.
So clearly explained, great job Chris!
Glad you think so Pawel, thanks!
you deserve thumbs up million times great tutorial
I love these tutorials
Very easy to follow video, thank you :) But I do have one problem...
My canvas takes up slightly more than the window height and width and that gives me scroll bars... Is it supposed to do that or could I have done something wrong?
Same here, did you find a fix for it? or did you move on?
Never hit the subscribe button so fast the way i just did
5 minutes into the video and I'm already lost mainly because I'm day dreaming and have a low attention span , soone out there know
Adhd
L
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
Wow! What a tutorial it is. It's too much beautiful. Thank you so much.
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.
Simple solution is to always add the working
Great video for beginners, thank you Chris !
Great video. Love the new Intro of course.
Thanks man, your latest one on CSS is great too, enjoyed it.
What sublime text theme are you using? It looks gorgeous!
Hey Nikoto, I use a theme called Afterglow with a color scheme called Agila Oceanic Next, definitely my favorite look to date.
Thanks a ton. :)
Thank you! So far this is way better than the college course I am paying thousands of fucking dollars to take.
Cool Im just getting started with canvas! I hoping I can use it for prototyping and making fun games!
support from india.
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!
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
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 :)
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;
Excellent explanations 😊
looking forward for the next tutorials, thanks Chris!
Thanks Joao, been with me since the start, truly appreciate it man.
Thanks for your videos, I wanted this course very badly.
I got a problem, The canvas is bigger than the window and I see scrollbars. Should I continue by adding the `overflow: hidden` property?
i have the same thing
you're the best man keep making videos please.
WISH GRANTED, THIS THURSDAY. THANKS MY DUDE!
Does work well on iOS and Android devices for these full-screen video like animations?
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/#/
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
never mind my question earlier, you answered this :)
veryy nice course my bro, please make more video. keep it up ^.^
My inner width and height are always a little bit extra. How can I fix this?
it probably are the borders if you still have those on in css.
browsers put the border on the outset by default.
but borders are not considered this particular java script code.
this is why the css approach for an element that remains static is better kind of but that is preference in my regard.
I ran into the same issue and found that the problem is related to the display property of the canvas element. I solved this by removing the border of the canvas element and set the display of the canvas element to block. Another way to solve this is by setting the vertical-align property to middle.
canvas {
border: 1px solid black;
Thanks Ray, had the exact same issue which is not covered in the video(though it should be).
@@raychan366 Thanks this worked, not sure why this is not in the video?
*{margin:0;
padding:0;
} add this in css
hey Chris! I'm lovin your courses
Thanks, that canvas element is pretty cool!
Good stuff, thx for making these concepts easy to understand
Thank you! You are awesome.
I am using sublime text 3 as well. I could not get that auto-complete for javascript. Did you install any plugin for that?
You're taste in music is good as well
I'm glad I found this playlist and your channel. You have some well put together videos. Keep the content coming!
Thank you... I love this series
You just earned a subscriber boy :D
The best tutorial on Canvas (paid or free) that I have experienced. Clear, concise, and fun.
super awesome, bro!
Thank you for these super amazing 12 canvas video series!
Could you just use
canvas {
height: 100vh;
width: 100vw;
}
to ensure a fullscreen canvas?
woo yah i entered that in the html file and now its scaleable when i resize the browser. thanks!
Bro do you also teach html svg?
That MrSuicideSheep subscription. :)
Hey chris, thanks for the brilliant course!!! the cheat sheet download link is not working , can you please fix that
Quick question... Adobe Animate canvas: I drew a square, turned it into a movieclip and gave it instance name of box. I set it to invisible. I put the following code on the first frame:
this.box.visible = true; After publishing, the box appears visible as expected (and invisible when the code is removed). HOW can I get that same code to execute from an external js file? The example is simply to let me see how to execute external script that effects the canvas' objects.
your explanation is very clear...will you make advanced javascript tutorial..???
your explanation skills are level 9000 :) great tutorial thank you very much !
I love your courses! Hope you will bring more tutorials in web animation!
Hi Chris, using window.innerwidth and window.innerheight that is giving me a scrollbar on both sides. I have reset the body margin and padding.
You are a great teacher. Awesome tutorials :)
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 border property on canvas element cause scroll bars so remove the border on canvas element.
Just add display: block; to the canvas element.
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 :)
Thank you for an excellent beginners tutorial!
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 :)
hey please answer me. i get a scroll ber on the right and bottom. When I set the height to innerheight and width to innerWidth.
same
same. how to avoid this?
same how do I fix it?