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.

Saving and Restoring

This week I have been experimenting with the Save and Restore functions in canvas. In this canvas test I drew boxes in 2 corners of the canvas, and a almost transparent box in each box. In the bottom left side of the box i drew 2 rectangles. In the center of the canvas I put 1 square and another inside it to demonstrate the Restore function. To demonstrate the Save function I saved the first 2 colors I used.
View project here.

   ctx.fillRect(0, 0, 150, 150);
   ctx.save();

fillRect(0, 0, 150, 150); fills certain parts of the canvas depending on how big the canvas is. This function for mine covered the entire canvas starting from the top with 0 px to the right, and 0 px down, then covers 150 px to the right and 150 px down.
save(); saves the color that was being used, which in this case since I didn't specify the color it automatically used black.


   ctx.fillStyle = 'green'
   ctx.globalAlpha = 0.5;
   ctx.fillRect(95, 95, 30, 30);

fillStyle = 'green' changes the color to green but if you don't use the save(); function the next time you use the fillRect function the color will change back to black, since that was the last saved color.

globalAlpha = 0.5; This function simply changes the transparency of the color you used.

   ctx.restore();
   ctx.restore();
   ctx.fillRect(60, 60, 30, 30);

restore(); This function restores the last color you saved, in my case I saved 2 colors so I had to use 2 restore functions to get back to black.