Некорректное отображение фигур

(() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  [canvas.width, canvas.height] = [window.innerWidth, window.innerHeight];
  document.body.append(canvas);
  clearCanvas();
  
  let startTime = getCurrentTime();

  /**
   * Эта функция вернет случайное число от min до max
   */
  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * max + min);
  };

  /**
   * Получаем текущий timestamp
   */
  function getCurrentTime() {
    return new Date().getTime();
  }
  
  function getRandomColor() {
    const letters = "0123456789ABCDEF".split('');
    let color = "#";
    for (let i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  };
  
  function getRandomPosition() {
    const boundBorder = 200;
    return [
      [boundBorder, canvas.width - boundBorder*2],
      [boundBorder, canvas.height - boundBorder*2]
    ].map(([min, max]) => getRandomNumber(min, max));
  }
  
  function rectangle() {
    ctx.fillStyle = getRandomColor();
    const [x, y] = getRandomPosition();
    const [w, h] = [[20, 200], [20, 200]].map(([min, max]) => getRandomNumber(min, max));
    ctx.fillRect(x, y, w, h);
  };
  
  function circle() {
    ctx.fillStyle = getRandomColor();
    const path = new Path2D();
    const [x, y] = getRandomPosition();
    path.arc(x, y, getRandomNumber(20, 200), 0, 2 * Math.PI);
    ctx.stroke(path);
    ctx.fill(path);
  };
  
  function ellipse() {
    ctx.fillStyle = getRandomColor();
    const path = new Path2D();
    const [radiusX, radiusY] = [
      getRandomNumber(20, 200),
      getRandomNumber(20, 200),
    ];
    const [x, y] = getRandomPosition();
    path.ellipse(x, y, radiusX, radiusY, 50, 0, 300, false);
    ctx.stroke(path);
    ctx.fill(path);
};

  function triangle() {
      ctx.fillStyle = getRandomColor();
      const path = new Path2D();
      const [x, y] = getRandomPosition()
      path.moveTo(x, y);
      path.lineTo(x+25, y+100);
      path.lineTo(x+75, y+100);
      path.closePath();
      ctx.stroke(path);
      ctx.fill(path);
  };

  function trapezoid() {
    const [c, d, j, i] = Array(4).fill([10, 200]).map(([min, max]) => getRandomNumber(min, max));
    const path = new Path2D();
    const [x, y] = getRandomPosition();
      path.moveTo(x, y);
      path.lineTo(x+c, y);
      path.lineTo(x+d, y-j);
      path.lineTo(x-i, y-j);
      path.closePath();
      ctx.fillStyle = getRandomColor();
      ctx.stroke(path);
      ctx.fill(path);
  };
  
  function clearCanvas() {
    ctx.fillStyle = '#FFF';
    ctx.fillRect(20, 20, canvas.width, canvas.height);    
  }
  
  function clearTimer() {
    ctx.fillStyle = '#FFF';
    ctx.fillRect(0, 0, canvas.width, 20);    
  }
  
  function drawReactionTime() {
    clearTimer();
    const finishTime = getCurrentTime();
    const reactionTime = (finishTime - startTime) / 1000;
    ctx.fillStyle = '#000';
    ctx.font = "12px Arial";
    ctx.fillText(`Time of reaction: ${reactionTime} sec.`, 20, 20);
  }
  
  function drawShape() {
    const Shapes = [rectangle, circle, ellipse, triangle, trapezoid];
    const randomIndex = getRandomNumber(0, Shapes.length);
    Shapes[randomIndex]();
    startTime = getCurrentTime();
  }
  
  /**
  * Проверяем пиксель на закрашенность
  */
  function isPositionFilled(x, y) {
    for (let i = 0; i < 4; i++) {
      if (ctx.getImageData(x, y, 1, 1).data[i] < 255) return true; 
    }
    return false;
  }
  
    
  function startRandomTimeout(max) {
    setTimeout(drawShape, getRandomNumber(0, max));
  }
  
  canvas.addEventListener('click', (event) => {
    const { x, y } = event; 
    if (x <= 200) return;
    if (!isPositionFilled(x, y)) return;
    drawReactionTime();
    clearCanvas();
    startRandomTimeout(3000);
  });

  
  startRandomTimeout(1000);
})();

body {
  position: fixed;
  inset: 0;
  margin: 0;
}