[tsigel]

Вот пример просто заливки цветом.

<canvas width='100' height='100'></canvas>

<script>

    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');
    var width = canvas.width;
    var height = canvas.height;

    var Circle = function () {
        this.progress = 0;
        this.time = 2000;
        this.start = Date.now();
        this.addDraw();
    };

    Circle.prototype.clear = function () {
        canvas.width = canvas.width;
    };

    Circle.prototype.addDraw = function () {
        requestAnimationFrame(this.draw.bind(this));
    };

    Circle.prototype.draw = function () {
        this.clear();
        var progress = (Date.now() - this.start) / this.time;
        if (progress > 1) {
            progress = 1;
        }

        ctx.strokeStyle = '#c3cbe5';
        ctx.lineWidth = 1;
        var end = 2 * Math.PI;
        var start = - Math.PI / 2;
        ctx.arc(width / 2, height / 2, 50, start, end * progress + start);
        ctx.lineTo(width / 2, height / 2);
        ctx.stroke();
        ctx.fill();

        if (progress < 1) {
            this.addDraw();
        }
    };

    new Circle();

</script>