Canvas drawing shapes around circle

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <h1>Lab 6</h1>
    <canvas
      width="600"
      height="600"
      style="border: solid black 1px"
      id="surface"
    >
    </canvas>

    <script>
      var distanceFromCenter = 0;
      var numberOfObjects = 0;

      function toRad(angleInDegrees) {
        const angleInRadians = angleInDegrees * (Math.PI / 180);
      }
      function isValidNumber(number, min, max) {
        if (isNaN(number) || !(number >= min && number <= max)) {
          return false;
        }
        return true;
      }

      function askForQuantity(){
        const number = prompt("How many items do you want to draw [1-10]?");
        if (isValidNumber(number, 1, 10)) {
          return number;
        }
        return 0;
      };
      function askForRadius (){
        const number = prompt("What radius would you like [1-200]");
        if (isValidNumber(number, 1, 200)) {
          return number;
        }
        return 0;
      };
      function askQuestions (){
        do {
          const quantity = askForQuantity();
          if (quantity) {
            numberOfObjects = quantity;
          }
        } while (!numberOfObjects);

        do {
          const radius = askForRadius();
          if (radius) {
            distanceFromCenter = radius;
          }
        } while (!distanceFromCenter);

        console.log(distanceFromCenter, numberOfObjects);
      };
      function drawTheShapes(objectsNumber, radius){

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

        // move to center
        ctx.translate(canvas.height / 2, canvas.width / 2);

        var num = 0;

        while(num<objectsNumber) {
          var ang = (num * Math.PI) / (objectsNumber / 2);
          ctx.rotate(ang);
          ctx.translate(0, -radius);
          ctx.rotate(-ang);
          createShape();
          ctx.rotate(ang);
          ctx.translate(0, radius);
          ctx.rotate(-ang);

          num++;
        }

        function createShape() {
            // you can create any shape here, now is just a simple circle
          ctx.beginPath();
          ctx.arc(0, 0, 40, 0, 2 * Math.PI);
          ctx.stroke();
          ctx.fill();
        }
      };

      window.onload = function() {
        setTimeout(function(){
          askQuestions();
          drawTheShapes(numberOfObjects, distanceFromCenter);
        }, 1000);
      };
    </script>
  </body>
</html>