Flashing dots on canvas

I don't see why this code isn't working. It should just draw a white rectangle covering the screen. Then a randomly placed blue dot and wait for the loop to complete. And then repeat the cycle by drawing the white rectangle again and turning off the dot and then redrawing it.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8"/>
    <title>Peripheral vision checker</title>


  <script type="application/javascript">

    function draw() {
      // draw crosshairs


      var onFor = 1000;
      const intervalID = setInterval(mytimer, onFor);

      function mytimer()
      {
      // draw white rects

      function getRandomInt(max) {
              return Math.floor(Math.random() * max);
              }

      var x = 1280;//will be equal to window height
      var y = 720;//will be equal to window width

      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      ctx.fillStyle = 'white';

      var xcoor =getRandomInt(x);
      var ycoor =getRandomInt(y);

      ctx.fillRect(0, 0, x, y);

        ctx.fillStyle = 'blue';

        var radius = 10;
        moveTo(xcoor,ycoor);
        ctx.arc(xcoor, ycoor, radius, 0, 2 * Math.PI);

        //console.log(xcoor + ' ' + ycoor);//just temporary, to see they work
        ctx.fill();
    }

  }

  </script>
 </head>
 <h1>Peripheral vision checker</h1>
 <body onload="draw();">
   <canvas id="canvas" width="1280" height="720"></canvas>
 </body>
</html>

Solution

You need to beginPath then closePath

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta charset="UTF-8" />
  <title>Peripheral vision checker</title>


  <script type="application/javascript">
    function draw() {
      // draw crosshairs


      var onFor = 1000;
      const intervalID = setInterval(mytimer, onFor);

      function mytimer() {
        // draw white rects

        function getRandomInt(max) {
          return Math.floor(Math.random() * max);
        }

        var x = 500; //will be equal to window height
        var y = 250; //will be equal to window width

        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        ctx.fillStyle = 'white';

        var xcoor = getRandomInt(x);
        var ycoor = getRandomInt(y);

        ctx.fillRect(0, 0, x, y);

        ctx.fillStyle = 'blue';

        var radius = 10;
        ctx.beginPath();
        moveTo(xcoor, ycoor);
        ctx.arc(xcoor, ycoor, radius, 0, 2 * Math.PI);

        //console.log(xcoor + ' ' + ycoor);//just temporary, to see they work
        ctx.fill();

        // no need to: 
        // ctx.closePath();
      }

    }
  </script>
</head>
<h1>Peripheral vision checker</h1>

<body onload="draw();">
  <canvas id="canvas" width="500" height="250"></canvas>
</body>

</html>