[Rise]

Там всё дело в moveTo, нужно начинать путь с центра круга, по-умолчанию путь arc идет не с центра, а с начала дуги.

<canvas id="canvas" width="400" height="250" style="background:beige"></canvas>
<script>
const ctx = document.getElementById('canvas').getContext('2d');

class Circle {
    constructor(x, y, radius) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.degree = Math.PI / 180;
    }
    draw(ctx, fillStyle, strokeStyle, startAngle, endAngle, lineWidth) {
        ctx.beginPath();
        if ((endAngle - startAngle) % 360) ctx.moveTo(this.x, this.y);
        ctx.arc(this.x, this.y, this.radius, startAngle * this.degree, endAngle * this.degree);
        ctx.closePath();
        ctx.fillStyle = fillStyle;
        ctx.fill();
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = strokeStyle;
        ctx.stroke();
        return this;
    }
}

new Circle(ctx.canvas.width * 0.5, ctx.canvas.height * 0.5, ctx.canvas.height * 0.4)
    .draw(ctx, 'aqua', 'blue', 0, 360, 8)
    .draw(ctx, 'lime', 'green', 0, 90, 6)
    .draw(ctx, 'pink', 'red', -120, -60, 4)
    .draw(ctx, 'transparent', 'yellow', 260, 45, 2);
</script>