[RESOLVED] fill divided circle, html5 canvas

[Seiduna]

picture

Hello, newbie here

Doing in html5 canvas, so JavaScript (was not sure where to post, but here I go...)

Above is a link to picture that I need to do. It is clock-like.
I will have to draw a circle, and two lines, from centre to according points on circle.
That is not a problem, the thing I can not do is
to fill upper and lower parts of circle that those two lines divide,
so upper part of a circle should be e.g. red, and lower blue.
(Plus, it would have to bi gradient, to look more appealing )

How would you recommend I go about it?
As newbie, example would be much appreciated.

Thank you.

[Seiduna]

Ola

I got it to work!
I used fill method,

ctx.fillStyle = "green";
    ctx.beginPath();
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(x2, y2);
    ctx.arc(200, 200, radius,  d2r(z1 + 90), d2r(v1 + 90), false);
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(x1, y1);
    ctx.closePath();
    ctx.fill();

and than repeated the same code, but arc direction in opposite direction:

    ctx.fillStyle = "blue";
    ctx.beginPath();
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(x2, y2);
    ctx.arc(200, 200, radius,  d2r(z1 + 90), d2r(v1 + 90), true);
    ctx.moveTo(center.x, center.y);
    ctx.lineTo(x1, y1);
    ctx.closePath();
    ctx.fill();

Thank you.