Learn HTML5 Canvas By Creating A Drawing App | HTML Canvas Tutorial

hello there friends today we're gonna learn a bit about canvas so if you've never used canvas before and you're like me and I've never used before for like one or two years I highly recommend just thing and learning a bit about it so what we're gonna do is we're gonna start off with learning basic shapes we're gonna learn about doing circles and squares and at the end we are also gonna do this small drawing app here which is not spectacular but hey it's pretty cool so as you can see if I draw it with my mouse that's a great head right there you can draw a nice smile a body here just like that big booty and Kim Kardashian right there alright so this is simple you can also work on this add more to it change the stroke how big it is the colors and all the other good things I'm gonna show you how to do that as well so let's get started I also want to thank you guys who really reached 1000 subscribers I started doing YouTube more seriously in October and I cannot believe we reached it already so that's super awesome so thank you thank you thank you very much I also got this which kind of looks like it's not a sex toy if you thought but it's a microphone stand that I that I can just move around like so so that's cool because previously I use toilet paper I'm not even joking I just put the toilet paper on top of the microphone anyway so canvas what's up with canvas and the only thing I did here is just add the boiler to this so we can easily see what that canvas is so we just have this canvas and I'm gonna add an IB here to canvas as well and just because I added this like so you can probably not use you probably don't need an ID but hey mind as well alright so that's all we have a script tag a CSS and just a HTML element called canvas so well where do the old graphics and things go well you can imagine that canvas is kind of like an art board that you can draw on so you don't really need any other elements in your HTML so you can add a lot of graphics on top of it either it be 2d or 3d doesn't really matter he can place them on top of each other there's nothing canon really doing CSS to position things so all everything needs to be generated in JavaScript so yeah and if you want to add let's just visualize this first how does this look now oh this is the finished one this is what we have so it's just a box okay a simple simple box now we can add the height to this here but again the problem is if we add a height here it's basically on the zoom in or artboard and that's just gonna pixelate everything so we don't want to do that so what we're gonna do is programmatically do the height and the width and JavaScript all right so we don't need neither HTML or CSS or it is just JavaScript so let's go into our JavaScript I'm gonna make a bit more space here and I'm just gonna do the basics and then we are gonna start on the drawing gap so what we need to do is well let's do a window dot add eventlistener and we are gonna do let me close this for more space and let's just do onload we're just gonna call this function here which is gonna execute our canvas so here let's do a console log and we're gonna say hello so what this is gonna do is just basically hey when the document is ready then it's gonna execute this script alright so that's all it does as you can see we have the hello there and that's perfect so what do we need to do well we need to get the element so we need to get the canvas and to do that we're just gonna say Const canvas so we're gonna create a variable here and we're gonna say document dot query selector I cannot see there we go and we're gonna say canvas like so great so that gets the canvas now another thing we need to do is to work inside the canvas so we need to actually define what and what context were working and so is it the 2d or 3d so we need to specifically write what kind of environment we're working on in so to do that all we have to do is just say context so we're gonna create another variable called context I'm gonna do a short version here like CTX but you can name it context if you want what we're gonna do this because under this context element we're gonna add different things like hey I want to square on this context okay I want a circle I want whatever you want okay so that's why I did the short notation here and you're gonna see why in just a minute so here all we have to do is just get the canvas from up here and all we have to do is say get context get context like so and we need to say it either 2d 3d so we're gonna say 2d here like so all right great so that's all we need now to programmatically resize this what we can do is let's say resizing here resizing like so what we can do what we can create a function for this so but let's keep it simple for now I'm just gonna say canvas that's height like so is equal to you window dot in our height so we're just gonna get the height from our window like so so it's gonna be the same size and to get the width all we have to do is say canvass start width is equal to window dot inner width there we go so it's gonna be the same size as our screen like so if you wanna do now the problem here is if we resize this it's it's not gonna keep its size so if you want to keep its size what you can do is just add this in a function and then you add eventlistener on the window like so and on resize you can execute this function so every time you resize it's gonna update the height and width if you want so that's a way you can do that but for this one we're gonna keep it simple we're just gonna change it like so but I thought I'd let you know if you want to build up on this and make it we better than mine good all right so we have this so we can start off by actually I'm gonna show you a few shapes and different things you can do so to do a shape what we can do is just again we can get this context that we have up here so we can write context like so and then we we can add dot to this and then you have a lot of different things you can do in this context so for now let's just do a fill rect alright so this is a rectangle basically and the way this works it has four parameters it's gonna be the position so x and y and the height and width to this so this the first two is kind of kind of gonna work like the position:absolute in CSS right so if you want to do top ten then it's gonna be ten from the top so if we do let's say 50 and 50 here and then let's give a size of 200 and 200 let's save this as you can see we have a square so if we move this up to a hundred as you can see it's gonna move a hundred from X and it's 50 from Y so 100 is gonna move it down just like so you can make this wider bigger let's go 500 it's gonna make it taller so you have X Y the position you have the width and you have the height so that's how you do a a square now you can also do a lot more here you can change the colors if you want you can just have a stroke on this so if you do stroke rectangle then you're only gonna have the line like so good so we can also change the color on this if we want just by writing C TX dot stroke style like so and we can set this equal to something like red but you're gonna see that this is not gonna work like so doesn't change to red well that's because this kind of goes down from up to down so we need to define it before hand like so as you can see red and then it works because what we can do is we can for example duplicate this again like so let's just move it to two hundred and two hundred and then we can modify the style here again so it's gonna change so make sure it's on top always because the next one is gonna have effect on the bottom one here also change the line width if you want so just see the exact line width just the way it sounds we can set this to five if we want and as you can see everything gets thicker so again if you want to change this one up again you can just do it down here so before we create the other one we can change this to two or something as you can see like so so another cool thing we can do is draw lines so if you want custom lines that are gonna go from left right not really a rectangle so just kind of move wherever you want is we can use this so we can write C T X dot begin path which all its gonna do is basically if we don't add this then all the lines are going to be connected so I'm gonna remove this and I'm gonna show you in one bit what this does so we're gonna add begin path and then we're gonna say C T X dot move to let's just say a hundred and a hundred which is basically gonna be just the starting position so if you remember on a rectangle we had the X&Y position so where we want the the drawing to start so you can imagine move to it's basically just like you're picking up your pen and moving to a certain position without drawing okay you're not trying anything you're just putting the position somewhere so that's exactly what we're doing here we're lifting up our pen and we're putting it at a hundred hundred so somewhere around here and from here we can draw a line so to do that all we have to do is say C T X dot line two like so and so if we one draw like a straight line like this let's just do 200 here and D Y we're gonna keep a hundred okay because we started here so we want to just go this way two hundred so if we save this nothing's going to happen yet because we have to add a fill to this so we're gonna write CTX dot fill like so excuse me stroke like so and there we go we have the line right there now if we can also draw it down so if we copy this and paste it down here let's say from this position I want to go down fifty so there you go we're we went down fifty and we can also hey what if we were done and we just want these lines to connect so for that we can do CP x dot close path like so which is basically just gonna connect the the remaining path here all right so here we have our resizing done and we're gonna need some specific variables actually I think only we need one so we're gonna say variables here and all we need is something called painting which we're gonna set to false initially so we need to know when we are pressing down and when we are not pressing down if we should draw or if we should not draw so we have our variables here and down here we're gonna need some event listeners listeners so these are gonna listen to you basically hey when we have our mouths down we want certain things to happen when our mouth is up we don't want to draw and all the other good stuff so here we're gonna start off with our first function before we go into our event listeners so one is going to be called a function start position all right like so and this is basically all its gonna do is gonna say painting is equal to true alright so when we click it's going to turn to true then we need one when it's finished so we're gonna say function and position or finished position it's going to be painting is equal to false like so all right hit save on this and here down in our event listeners we can do three so we need a canvas dot add event listener on mouse move which we don't have right now so one when it moves we want to actually draw so we're gonna create another one for that so to do the starting position we're gonna do Mouse down alright so when we click down it's gonna set the painting to true so it knows it's painting and we're gonna just put the function here so start position like so I'm gonna make this a bit bigger like so and then we need we can duplicate this we can do Mouse up like so and here we can do the finish position like so alright so every time we click down the painting becomes true whenever we lift up our mouse the painting is gonna become false basically so that's all we need there good so now we can do the last one which is gonna be called mouse move so every time our mouse moves we can execute something called paint or draw actually draw maybe it's better fitting so down here we're gonna say function draw we're gonna add an event to this because we're gonna need certain things so here we can do CPX let's set up the way actually before we do that we can add if statement and check if we're drawing or not so to do that we're gonna say if we're not drawing or painting because we said painting here whatever then we can return so basically if we're not holding down the mouse this is just gonna return that's not gonna be doing anything alright it's safe and then down here we can set some certain styles to our our pen so we can the CTX dot line width is equal let's put it to 10 so it's a bit bigger we can do line cap which is just basically gonna make our line round it's kind of like a circle so we can do round here you're gonna see this in just a second all right good so what else do we need to do how do we start drawing the line well we can do CTX dot line two like so and here well where do we want the line to go to well we want the line to go to on where basically where our mouse is so how do we get that well we can do it with the event here so we can say e dot client X it's gonna be our X and e dot client Y is gonna be the Y position of the mouse so there we go hit save on this good one thing that we need to do is add a stroke to this so see TX dot stroke so we can visualize this and as you can see when i hold down it's gonna draw a beautiful line now the problem is as you can see after we let go and we click it's gonna jump right there again so we're gonna also fix that in just a bit so again that's that's the reason why I do the begin path because if you don't do that then everything is just gonna stick to one big line so what we need to do is say C T X dot begin path like so then we're gonna say C T X dot move to and we're gonna say e dot client X and e dot client Y like so so right now we have these dots and then I'm messed up here hit save again and there we go we have a nice line and it's still gonna jump so to fix that what we need to do is after we finish so after we lift up our path this finished position is going to execute so what we can do is say C T X dot begin path here again which is gonna reset so we can draw multiple times like so there we go now another small issue we have is when we click we don't get anything only if we drag a bit like so to fix that you can go up here and at the start position we can just call the draw function again and put the event in here and also we need to add event here so if we save this and boom we can also do dots now and we can draw lines as well so there we go that's it quite simple nothing too too crazy you can also add variables to this so you can separate it from the function if you want to build something even better and you can add let's say 20 here which is gonna make it thicker like so you can change the CPI X dot what is it called oh my god the stroke style and you can change this to red or you can change to whatever you color you want you can have maybe buttons or something stuck here and then you can maybe an input slider or something that changes the size of the width here and you can also have a few buttons or something to select colors now you can also I mean you can remove the begin path and the move to it's still gonna work for you it's just gonna be a bit more pixelated so the only reason we added this is to just begin a new path so basically a new small circle like that and then we just update the position we move it to here this is gonna give it a bit of a smoother kind of line here like so so thank you very much again please drop a subscribe if you enjoy this video hopefully I made you become a bit more creative and I'll see you very soon [Music]

Channel: Dev Ed

Views: 172,358

Keywords: html5 canvas, html canvas, learn html5, learn html5 canvas, drawing app, drawing app tutorial, html5 canvas game, html5 canvas tutorial for beginners, canvas tag, html5 tutorial for beginners, html5, canvas element, javascript draw, html drawing, learn javascript

Id: 3GqUM4mEYKA

Length: 19min 42sec (1182 seconds)

Published: Thu Jan 17 2019