canvasで正円を描画したいのに楕円になってしまう

Reactでcanvas扱ってたときに正円を描画したいのに楕円になったときの備忘録

canvas描画部分

const ctx = this.canvas.current?.getContext('2d');
if (!ctx) {
  return;
}
ctx.fillStyle = "black";
ctx.fillRect(30, 0, 290, 450);
ctx.fillStyle = "orange";
ctx.beginPath();
ctx.arc(100, 50, 15, 0, 2 * Math.PI);
ctx.fill();

修正前

<canvas style={{ width: "320px", height: "450px" }} ref={this.canvas}></canvas>

修正前のcanvasで描画された楕円

修正後

<canvas width="320px" height="450px" ref={this.canvas}></canvas>

修正後のcanvasで描画した正円

原因はstyle属性にwidth,heightを書いていたこと
canvasにwidth, height属性として記述すればOK

意図的に楕円を描きたいときはelipseを使う

参考

developer.mozilla.org