![enter image description here](https://i.stack.imgur.com/LoSa3.png)

How can I divide a circle into three equal parts with HTML5 canvas 2D context API like above figure?

I was trying [this](http://jsfiddle.net/mithun/V8xms/) 

Can somebody suggest a better way? probably with percentages (or in degrees) instead of hard-coded coordinates?

```
var can = document.getElementById('mycanvas');
var ctx = can.getContext('2d');

ctx.fillStyle = "#BD1981";
ctx.beginPath();
ctx.arc(200, 200, 150, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

ctx.strokeStyle = "#FFC8B2";
ctx.lineWidth = "2";
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(350, 200);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(100, 300);
ctx.closePath();
ctx.stroke();

```