Sudanese Flag

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.