Drawing a triangle to the canvas
JavaScriptTranscript
English (Auto-generated)
now let's draw a triangle. And this part is a bit tricky as we'll be using multiple line to method calls. So I'll go ahead and comment out the previous code so that our canvas is fresh. Okay? And first things first let's begin the drawing path with context. God begin path with which starts a new joint path for us. And next let's set the fill style property to the green color so that we have a green triangles. And context dot fill style is equal to the strength green. Okay now let's set the coordinates for a triangle starting with the move to method which will move the path to the specified points in the canvas. So we'll start with context dot move to And we will start at X0 and Y 50. Control S to save. Now let's use the line to method which draws a line from the previous points to the X and Y points that we give it so context dot Blind to and for this we'll have X at 50 and Y at zero. And to actually draw this line we need to use the stroke method so context God stroke and control us to safe and there you go. So we have this line which starts at X zero Y 50 and moves up to X 50 and then ends at Y zero. And we used the stroke method to actually draw the line. Now let's use the line to method again to draw a line from X 50 and Y 02 X 100 Y 50 and we use Line two again and this time we give it the arguments 100 comma 50 control S to save. And there you go. So we have our second line for the triangle and we're almost there for a third line. We'll draw it from the most recent previous set of points to X0 and Y 50. So context got line too. And this time it's X zero and Y 50 control. S to save and there you go. So we have a triangle. Now let's not forget to fill in the triangle with the green color. And for this we will use and I'll just put it here context got Phil so we need to use the film method which is going to fill the triangle with the style that we specified which is green. And there you go. So now we have a green triangle. You can play around with the line to values to make different kinds of triangles. But we'll leave this here and in the next podcast. Well now we'll start drawing images and videos to the canvas.