Overlapping shapes to create other shapes

There are many flags and many shapes in general that can be created by combining the shapes we created so far. One of the most popular shapes in 82 flags we don't know how to create is the crescent shape like the one in the flag of Turkey. With it we learn a new skill of using subtraction to create more in-depth shapes.

Getting ready

The previous recipe is our starting point in this recipe. From here, we will continue working to create more advanced shapes that are built out of two shapes when combined. As such, we will be using the code created in the last recipe located in 01.02.flags.js.

How to do it...

Let's jump right into our code and see it in action.

1. Gain access to the context and save the width and height of the canvas into variables:

   var canvas = document.getElementById("turkey");
   var wid = canvas.width;
   var hei = canvas.height;
   
   var context = canvas.getContext("2d");

2. Fill the rectangle canvas area:

   context.fillStyle = "#E30A17";
   context.fillRect(0,0,wid,hei);

3. Create a full circle:

   context.fillStyle = "#ffffff";
   context.beginPath();
   context.arc(wid / 2 - 23, hei / 2, 23, 0, 2 * Math.PI, false);
   context.closePath();
   context.fill();

4. Change the color of canvas fill. Fill a circle within its bound with another circle that hides part of the last circle that was created. This effect creates a shape that looks like a crescent moon:

   context.fillStyle = "#E30A17";
   context.beginPath();
   context.arc(wid / 2 - 18, hei / 2, 19, 0, 2 * Math.PI, false);
   context.closePath();
   context.fill();

5. Reuse createStart from the previous recipe to add the Turkish star:

   createStar(context,wid/2 + 13,hei/2,5,16,5,"#ffffff",null,15);

There you go! You've just created a shape that is not possible without masking one shape with another.

How it works...

The catch here is we are using two circles, one overlaps the other to create a crescent shape. By the way, notice how we are tilting the star as well so that one of its points will point to the middle of the circle.

We've gone through a lot in the last few examples and at this stage you should be very comfortable creating many shapes and elements in the canvas. There is still much to explore before we can say we have mastered canvas, but we can definitely say we have mastered creating most of the flags of the world and that's very cool. I would love to see your flags. Drop me a line when you create one not in the book! :)