Canvas не обновляется при изменение размера окна

Пытаюсь заставить холст canvas изменять размер при изменение размеров окна. Нашел функцию на js, чтобы это сделать, но не знаю как вытащить глобальные переменные W и H из функции. Без этого ничего не работает.

//Создайте холст и инициализируйте контекст
const canvas = document.getElementById("circles");
const ctx = canvas.getContext("2d");

//Установите размер холста равным размеру карты при измение размера холста
window.addEventListener('resize', resizeCanvas, false);
function resizeCanvas() {
//W и H не работают внутри функции
  const W = canvas.width = document.body.clientWidth;
  const H = canvas.height = document.body.clientHeight;
  draw();
}
resizeCanvas();

//Количество кругов
const circleNbr = 10;

// Градиент
const bgColor1 = 'rgba(153, 83, 85, 1)';
const bgColor2 = 'rgba(52, 9, 80, 1)';

//Создаем массив кругов
let circles = []; 
for(let i = 0; i < circleNbr; i++ ){
  circles.push(new circle());
}

//Функция для создания круга
function circle() {
  //Случайная позиция
  this.x = Math.random()*W;
  this.y = Math.random()*H;

  //Случайная скорость
  this.vx = 0.2 + Math.random()*0.5;
  this.vy = -this.vx;

  //Случайный радиус
  this.r = 3 + Math.random()*10;

  //Случайный цвет непрозрачности
  this.color = "rgba(200, 116, 82,"+(Math.random()*(1 - .5) + .5).toFixed(1)+")";
}

//Функция для рисования градиентного фона с кругами
function draw() {

  const grd = ctx.createLinearGradient(0, 0, W, H);
  grd.addColorStop(0, bgColor1);
  grd.addColorStop(1, bgColor2);

  //Заполните холст градиентом
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, W, H);

  //Заполните холст кругами
  for(let j = 0; j < circles.length; j++) {
    let c = circles[j];

    //Круг
    ctx.beginPath();
    ctx.arc(c.x, c.y, c.r, Math.PI*2, false);
    ctx.fillStyle = c.color;
    ctx.fill();

    //Скорость
    c.x -= c.vx;
    c.y += c.vy;

    //Когда круги выйдут за пределы холста
    if(c.x < -20) c.x = W+20;
    if(c.y < -20) c.y = H+20;
  }
}
setInterval(draw, 30);