Ich versuche, eine Gruppe von Kreisen mit dem HTML5-Zeichenflächenelement (wie in Abb. 1 gezeigt) zu zeichnen. Bildbeschreibung hier eingeben

Above wird abgeschnitten, wenn ich die Größe des Browsers ändere. Ich möchte, dass es reagiert, wenn ich die Größe des Browsers ändere.

Bitte hilf mir, es ansprechbar zu machen. Vielen Dank

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>