【P5.js】描画したものの比率が歪んでいるときに対処したこと

1
let result = document.getElementById('result');
2
let d = 100;
3

4
function setup() {
5
  let canvas = createCanvas(windowWidth, windowHeight);
6
  canvas.parent(result);  //canvasを指定した要素の子要素にする
7
}
8

9
function draw() {
10
  clear();
11
  circle(mouseX, mouseY, d);
12
}
13

14
function mouseClicked() {
15
  if (d == 100) {
16
    d = 300;
17
  }else if (d == 300) {
18
    d = 100;
19
  }
20
}

1
let result = document.getElementById('result');
2
let canvasWidth = Number(result.clientWidth);
3
let d = 100;
4

5
function setup() {
6
  let canvas = createCanvas(canvasWidth, windowHeight);
7
  canvas.parent(result);  //canvasを指定した要素の子要素にする
8
}
9

10
function draw() {
11
  clear();
12
  // 直径をマウスのx座標にする
13
  circle(mouseX, mouseY, d);
14
}
15

16
function mouseClicked() {
17
  if (d == 100) {
18
    d = 300;
19
  }else if (d == 300) {
20
    d = 100;
21
  }
22
}