Я пытаюсь построить группу кругов, используя элемент холста HTML5 (как показано на рис. 1).введите описание изображения здесь

Выше рисунок обрезается, когда я изменяю размер браузера. Я хочу, чтобы он был отзывчивым при изменении размера браузера.

Пожалуйста, помогите мне сделать это отзывчивым. Спасибо.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth; /// equal to window dimension
canvas.height = window.innerHeight;

var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
drawClock();

function drawClock() {
  drawCircle(ctx, radius);
}

function drawCircle(ctx, radius) {
  var ang;
  var num;

  for (num = 1; num <= 40; num++) {
    ang = num * Math.PI / 20;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.beginPath();
    ctx.arc(0, 0, radius / 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

#canvas {
  display: block;
}

<canvas id="canvas"></canvas>