在 HTML 画布上绘制圆圈时遇到问题

我一直在 HTML 画布上绘制矩形很好，但我的项目也需要使用圆形，这似乎不起作用。矩形是用这个绘制的：

var myGameArea = {
    canvas: document.createElement("canvas"),
    start: function () {
        this.canvas.width = 300;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    }
}

function component(width, height, color, x, y, ) {
   this.width = width;
   this.height = height;
   this.x = x;
   this.y = y;

   ctx = myGameArea.context;
   ctx.fillStyle = color;
   ctx.fillRect(this.x, this.y, this.width, this.height);
}

如何使用类似的方法绘制圆圈？