This week I went back to learn more about drawing a triangle because I didn't completely understand how to make on. I experimented trying to draw a triangle then I started to make the Sudanese flag.
View project here.
ctx.fillStyle = "red";
ctx.fillRect(0 , 0, 250, 50);
ctx.fillStyle = "white";
ctx.fillRect(0, 50, 250, 50);
ctx.fillStyle = "black";
ctx.fillRect(0, 100, 250, 50);
The fillStyle simply fills the rectangle with the specified color.
The fillRect draws the rectangle. (explained in greater detail here.)
ctx.fillStyle = "green";
ctx.beginPath();
ctx.moveTo(90, 75);
ctx.lineTo(0, 0);
ctx.lineTo(0, 150);
ctx.fill();
beginPath starts the drawing.
moveTo specifies how far out you want the first side of the triangle. You do this by moving it x px to the left or right and y px up or down. (x, y)
Afterwards you use lineTo to specify the next 2 sides of the triangle, the same way you did for the moveTo function.
After you specify the 3 sides you NEED to have either fill() or stroke() for the triangle to appear on the canvas. fill() is used when you want to fill the triangle with a color. stroke() is used when you just want the triangle to appear.
