Canvas custom shape fill issue -

I need to create custom shapes in the canvas to show the graph in human shape. I made the shape, but when I I try to fill it, it is not being filled properly, some part is missing and some overflow is there.

This is a link to my demo:

  var canvas = document.getElementById ('myCanvas'); Var reference = canvas.getContext ('2d'); Context.beginPath (); Context.arc (65, 60, 35,0, Math. PI * 2, true); Context.moveTo (5,100); Context.lineTo (5, 300); Context.moveTo (35,300); Context.arc (20, 300, 15, 0, Math. PI); Context.moveTo (35,300); Context.lineTo (35, 250); Context.lineTo (95, 250); Context.lineTo (95, 300); Context.moveTo (125,300); Context.arc (110, 300, 15, 0, Math. PI); Context.moveTo (125,300); Context.lineTo (125100); Context.lineTo (5, 100); Context.fill ();  

When you're drawing cirles you're getting in trouble.

You are in (5, 300), then you go (35,300) and now you draw your circle back (5, 100), then go back (35, 300).

Instead, you can clock the clock by adding the parameter true at the end of the acr () - function:

Before: Context.arc (110, 300, 15, 0, Math. PI); After

: context.arc (110, 300, 15, math.pi, 0, true);

As you can see, I have also reversed the radius values ​​