javascript - これで角が丸くならないのはなぜですか？

Question

角の丸い四角形を描こうとしていますが、これまでのところ上の角だけが丸くなっていますが、下の 2 つの角は丸くなっていませんか? 完全なコード: https://github.com/GunZi200/Memory-Colour/blob/master/SourceCode.js

エラーを見つけることができますか？

        ctx.fillStyle = rectangle.color;
        ctx.moveTo((rectangle.x + 40 - 30) * Xf, (rectangle.y + 30 - 30) * Yf);
        ctx.lineTo((rectangle.x + 40 + 40) * Xf, (rectangle.y + 30 - 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 30 - 30) * Yf, (rectangle.x + 60 + 30) * Xf, (rectangle.y + 50 - 40) * Yf);
        ctx.lineTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 60 + 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 60 + 30) * Xf, (rectangle.y + 80 + 30) * Yf, (rectangle.x + 50 + 40) * Xf, (rectangle.y + 80 + 30) * Yf);
        ctx.lineTo((rectangle.x + 40 - 40) * Xf, (rectangle.y + 80 + 30) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 80 + 30) * Yf, (rectangle.x + 30 - 30) * Xf, (rectangle.y + 70 + 40) * Yf);
        ctx.lineTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 50 - 40) * Yf);
        ctx.quadraticCurveTo((rectangle.x + 30 - 30) * Xf, (rectangle.y + 30 - 30) * Yf, (rectangle.x + 50 - 40) * Xf, (rectangle.y + 30 - 30) * Yf);