I drew myself with canvas api and javascript

so recently i watched a video where web dev simplified drew a picture of himself using html and css and i thought this was a pretty cool idea so today i'm going to do something similar but instead of css and html i'm going to use javascript in canvas api so i've already made a start i've done what i would consider to be the boilerplate coding so i've created a basic index.html file and as you can see in line six it's got a css file and inside that css file we are setting the margin and padding to zero and we're setting the background color to in-house blue also in the html file you can see that we've got 2js files and index.js and david.js the index.js file simply does some utility stuff it prepares the canvas and by preparing i mean it sets the canvas element to the same size as the document and on line 9 it creates a new class called david and that class is created inside the david.js file and as you can see inside that file we have a class called david and it has a constructor where it sets up some properties that we'll use throughout the session and on line 12 it has a draw function and that draw function draws the body the head the eyes the hair the beard the mouth and the glasses and if we quickly look at those functions at the moment all they do is they print out a console statement so if we actually go to the web page you'll see we have a nice blue background if i open the console you'll see the console messages for drawing the body head eyes hair beard mouth glasses so now that you know what i've done so far let's get started so if we go to line 22 and we bring that to the middle of the screen the first thing we're going to do is draw the body so if i quickly go back to the top of the page you'll see that i've created an object called body and inside that body we've got some properties width height shoulder and color and we're going to use these to help create the body so let's go back down to line 23 and the first thing i'm going to do is set a proper a called radius and that will be the same value as the body shoulder and then i'm going to set the x position so let's do let x and that's going to equal this x which is defined in the constructor minus the body width and then we'll times it by 0.5 so effectively what we've done there is we've set an x position to be the same as the x position that we created in the constructor but minus half the body width and this will effectively work as a center point that we can then use as kind of like the origin point for drawing the whole body so again if i go back to the top of the page we already have a context object and that context object is being passed through to this class from the index.js file so again we'll go down to line 23 we'll bring it to the center of the page and the next thing we'll do is we'll save the context so effectively what we're doing here is we're saving the current state of the context object the next thing we're going to do is set the color so let's do that ctx dot fill style equals this dot body dot color effectively what we're going to do here is we're going to start at a point and we're just going to draw all the lines we need to create the body shape and it will be a very simple body shape it's effectively going to be a rectangle with two curved edges so let's start that and the first thing we need to do for that is to begin the path so we'll do this dot ctx dot begin path like so and then we'll do this dot context dot move to and the move to method is actually going to set the position where we start drawing our lines so we'll do x which is the x we set on line 25 plus the body dot shoulder and that will set the x position and then we'll do this dot y which again is set in the constructor so that's to set the starting point for drawing the lines the next thing we need to do is draw our first line and to do that we'll do this dot ctx dot line two it will be x plus this dot body width minus this dot body shoulder and then this dot y and if we have a quick look at that so we can't see anything but that's because we haven't closed the path and actually called the stroke method so let's quickly do that let's create a space there and we'll do this dot ctx dot close path like so and then we'll do this dot ctx dot stroke i think that's right and now i think we should actually see a line on the page and there you go we've got our first line on the page so the next thing we're going to do is draw a shoulder and to do that we're going to use the arc 2 method and the way the arc 2 method works is that you effectively set two points and a radius and the first point is not where you start it's the point where the two lines would meet if you were drawing straight lines ie a corner and then the second point is where you finish off and then arc two uses some magic to actually draw the curve let me quickly show you that so on the whiteboard there you can see that we've got the ctx.arc2 method at the bottom of the screen and in the top right corner we have the start point which is x and y but the first point that we add to the r2 method p1 dot x and p1 dot y is actually the corner where the two lines would meet if you were drawing a straight line and then point two is where the arc will finish off and finally there's a radius which determines how rounded the corner will be or the arc will be so i'm going to go ahead and use the arc 2 method to draw our first shoulder and just like magic there is on the screen and there it is on the page and as you can see we now have our first shoulder and so the next thing i'm going to do is i'm going to use the line two to draw the right side of the body then i'll use a line two to draw the bottom and then i'll do another line two to draw the left side of the body so i'll go ahead and do that and again just like magic that code is on the screen and if we save it and we look at our page we'll see that we've almost got the body completed and the last thing to do is another arc to call to do the left shoulder so i'll go ahead and do that now and boom just like that we've got the outline of our body a very simple body but our body nonetheless so at the moment we're only stroking the outline but what we actually want to do is fill the body with our body color so we'll do that now and that will be simple enough on line 44 we're calling ctx ctx.stroke but all we have to do is call ctx.fill and there you go that is the body complete and the next thing on the list is to actually draw the head so we'll do that next so i made a start to the drawhead function i've added in the properties that we'll need to draw the head i've called the context save i've set the fill style i began the path i've actually closed the path and filled it and restored the context so in line 58 what we'll start doing is drawing the head so the first thing we'll do is we'll move to the x and y position that i set on lines 51 and 52 and then we'll draw our first line and it will be x plus the head width and y and then i'll draw another line and again this will be x plus the head width but this time y will be y plus this dot head height minus radius so i appreciate that these variables are quite hard to visualize so let's quickly save it and we can see what we've done so far so it looks like we've got an error there let's have a quick look okay someone spelt begin path wrong let's quickly fix that and if we save again so from our starting point we've drawn one horizontal line and one vertical line and because we're using the fill method what it does it tries to interpret what should be filled so because we have two lines that don't meet up it's effectively created a line that connects those two detached points but the next thing we're going to do is do a couple of arc twos to draw a semi-circle for the bottom of the head so let's do that next and just like magic i've already done the two arc two calls and again if we save that and we go and visit our page now interestingly we haven't met up all the points but as i said before the context fill method will try and interpret what to fill and in this case it has connected up the end of our second arc with our starting point but we'll actually add that line in now and so it's this dot ctx dot line two and we want to draw a line back to our starting point so it's x and y and if we save that and go back to our page we will see our completed head alongside our completed body so the next thing we're going to do is the eyes and for the eyes i've already created a helper method for drawing a semi-circle let me show you that so at the bottom of our file here we've got two helper methods on line 99 we have draw a semicircle and we're going to use that to draw our eyes on a line 109 we've got degrees to radians which we'll be using later on to help draw the beard but let's go back up to the draw eyes method so for the eyes what i'm going to do is draw two semi-circles for each eye but inside each semi-circle i'll draw another semi-circle to represent the pupil but rather new watching me code it out i'll just add it right now and just like magic the code is on the screen a quick overview i've set the properties i need to draw the semicircles and then on line 87 i've drawn the eye and on line e8 i've drawn the pupil for the first eye and then on line 89 i've drawn the second eye and on line 90 i've drawn the pupil for the second eye and if we save it and we go and look at the page there we have it we have the eyes on the screen so the next thing to do is the here so i'm going to go ahead and add the variables i need to actually draw the here and there you have them and then we need to call this dot context save and we'll do this dot ctx dot save we're going to set the fill style to equal the hair color and then we'll begin the path and then we'll close the path and then we'll call the fill method and then we'll restore so in line 104 we'll start actually drawing the here so let's move to our starting point which is going to be x y and then we'll draw our first line it will be x and it'll be y minus the here height and then we're going to use the arc 2 method again we'll do this dot c t x dot arc 2 it'll be x y minus radius and that will be x plus hair height and that will be y minus radius and then radius and again i appreciate these variables are not easy to visualize in terms of shapes so what i'll do is i'll finish off the here and then we'll quickly go over what i did so that's the hair code done let's have a look at the result so i've completed the code and we have an error so i'm going to fix that now and it's line one zero four i forgot to actually call the context object so let's put that in there and we've also done that on line one zero five so i'll fix that too now if i save that and we go back to the page and it's there but the hair color is wrong so let's fix that yeah on line 102 we've got this dot head color but it's actually a variable called here color so again let's save that let's go up here and that's much better so what we did is we started at our xy position and i drew a line straight up and then i drew an arc down then we did another line and then we did another arc and then we did a line that connected back to our original point so i've added the properties we need to draw the beard so again we need to start by saving the context and then we're going to begin the path we'll also need to set the color it's the same color as the beard so i'll grab it from that method so that's line 102. we'll paste it on line one two four let's bring that up to the center of the screen and before we start drawing we'll actually close the path so let's do this dot ctx dot close path then we'll do this dot ctx dot fill and then we'll do this dot ctx dot restore clean this up a bit and then we'll go back to line 126 and start drawing our beard so this time we're going to use the arc method to draw the beard so i'm just going to go ahead and do that first and then i'll explain what i did so in line 126 we have our arc on the screen and what we've done we've set an x and y position and then we've set the radius and as you can see on line 127 we're actually using our helper method that i mentioned earlier degree to radians and you don't need to do this but i just find it a little bit easier to work with degrees than i do with radians so we're starting with an angle of 20 and we're finishing with an angle of 160 and the result is as follows and there you go we've got a kind of semi-circle at the bottom of our head but we're not finished yet so let's continue so we need to draw another arc which will represent the moustache so in order to do another circle we need to actually close the path for the first arc and then begin a path for the second arc so let's grab the line one two five and we'll paste it under one two eight and then i'll actually paste one two eight under one two nine and then inside there i'm going to draw another arc and again i'm just going to paste that in and just like magic it's on the screen this time i haven't used the degree to radians it's a little bit easier to deal with it's just a semi-circle and the result for that is as follows oh that's not right what we done wrong there ah we closed the path for the first arc but we didn't fill it so let's do ctx dot fill like so and when we go back to our page that's better so now we've got the beard done so the next thing to draw is the mouth and the mouth is more of the same it's just another semi-circle so i'm just going to go and do that now and just like magic we've got the mouth on the screen so we're almost done the last thing is the glasses so let's do that next so rather than an x and y property i'm also going to need to save the context so i'll grab that from line 142 and we'll paste it on line 155 i'm going to grab line 144 i'm going to paste that i'm going to go to line 155 and i'm going to paste it under there for the color of the glasses i haven't actually set a variable because it's black and it's very easy to remember the hexadecimal value for black so let's do hash or pound sign if you're american one two three four five six so we've saved the context we've started the path we've set the fill style let's close fill and restore the context so if i go to line 146 and i copy lines one four six seven and eight and i come back down to one five seven and paste it under there and that's just close the path and then in one five eight we'll actually start drawing the glasses so the glasses are going to be fairly simple there's going to be one straight line across the top of the forehead and then there'll be two outlined rectangles in front of the eyes so i'm just going to code that out and then we can have a look at the result and there you go that's the glass is completed and if we have a quick look at the code what we do is we begin the path we set the fill style and this occasion we set the line width just to give the glasses some thickness then we draw the rectangle around the first eye and then on line 160 we draw the rectangle around the second eye we close the path for those rectangles and then we begin the path again and we move to the left side of the head and we draw a line to the right side of the head then we close the path then we call the stroke method and then we restore and the end result is what you can see on the screen so i can't think of any useful situation where you would draw a picture of yourself using canvas api and javascript but it is a useful exercise for getting to grips with canvas api and the methods that it provides for drawing on the screen and i think it's pretty lifelike and to prove that here's the picture that we've just drawn with javascript and canvas api and here's a picture of me heading to the pub with my mates and i think you'll agree they're almost identical hope you enjoyed the process thanks for watching you

Channel: David Reid

Views: 20

Keywords: I drew myself with canvas api and javascript, I drew myself with javascript, I drew myself with canvas api, drawing with canvas api and javascript, canvas api, javascript, programming, coding, draw yourself with canvas api and javascript, javascript portrait

Id: BPOicMEYRj0

Length: 17min 6sec (1026 seconds)

Published: Mon Aug 16 2021