圆圈不能画在画布上

嗨，我想做一个动画。一个圆圈应该从右到左。现在的问题是，画布上没有画圆。我检查了chrome开发人员工具的控制台日志，但没有错误。有人知道这是什么错误吗?

      window.onload = window.onresize = function() {
        var C = 1; // canvas width to viewport width ratio
        var el = document.getElementById("myCanvas");
        var viewportWidth = window.innerWidth;
        var viewportHeight = window.innerHeight;
        var canvasWidth = viewportWidth * C;
        var canvasHeight = viewportHeight;
        el.style.position = "fixed";
        el.setAttribute("width", canvasWidth);
        el.setAttribute("height", canvasHeight);
        var x = canvasWidth / 100;
        var y = canvasHeight / 100;
        var ballx = canvasWidth / 100;
        var n;
        window.ctx = el.getContext("2d");
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        // draw triangles
        function init() {
          ballx;
          return setInterval(main_loop, 1000);
        }
        function drawcircles() {
          function getRandomElement(array) {
            if (array.length == 0) {
              return undefined;
            }
            return array[Math.floor(Math.random() * array.length)];
          }
          var circles = [
            '#FFFF00',
            '#FF0000',
            '#0000FF'
          ];
          ctx.beginPath();
          ctx.arc(ballx * 108, canvasHeight / 2, x * 5, 0, 2 * Math.PI, false);
          ctx.fillStyle = JSON.stringify(getRandomElement(circles));
          ctx.fill();
          ctx.closePath;
        }
        function draw() {
          var counterClockwise = false;
          ctx.clearRect(0, 0, canvasWidth, canvasHeight);
          //first halfarc
          ctx.beginPath();
          ctx.arc(x * 80, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;
          //second halfarc
          ctx.beginPath();
          ctx.arc(x * 50, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;
          //third halfarc
          ctx.beginPath();
          ctx.arc(x * 20, y * 80, y * 10, 0 * Math.PI, 1 * Math.PI, counterClockwise);
          ctx.lineWidth = y * 1;
          ctx.strokeStyle = 'black';
          ctx.stroke();
          ctx.closePath;
          // draw stop button
          ctx.beginPath();
          ctx.moveTo(x * 87, y * 2);
          ctx.lineTo(x * 87, y * 10);
          ctx.lineWidth = x;
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo(x * 95, y * 2);
          ctx.lineTo(x * 95, y * 10);
          ctx.lineWidth = x;
          ctx.stroke();
          ctx.closePath;
          //circle
        }
        function update() {
          ballx -= 0.1;
          if (ballx < 0) {
            ballx = -radius;
          }
        }

        function main_loop() {
          drawcircles();
          draw();
          update();
        }
        init();
        function initi() {
          console.log('init');
          // Get a reference to our touch-sensitive element
          var touchzone = document.getElementById("myCanvas");
          // Add an event handler for the touchstart event
          touchzone.addEventListener("mousedown", touchHandler, false);
        }
        function touchHandler(event) {
          // Get a reference to our coordinates div
          var can = document.getElementById("myCanvas");
          // Write the coordinates of the touch to the div
          if (event.pageX < x * 50 && event.pageY > y * 10) {
            ballx += 1;
          } else if (event.pageX > x * 50 && event.pageY > y * 10) {
            ballx -= 1;
          }
          console.log(event, x, ballx);
          draw();
        }
        initi();
        draw();
      }

<div id="gameArea">
  <canvas id="myCanvas"></canvas>
</div>