Eyes on canvas

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 75;
      var startAngle = 1.1 * Math.PI;
      var endAngle = 2.1 * Math.PI;
      var counterClockwise = true;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      context.fill()
      context.strokeStyle = 'purple';
      context.stroke();

      var x2 = canvas.width / 2 + 140;
      var y2 = canvas.height / 2 ;
      var radius = 75;
      var startAngle = 0.9 * Math.PI;
      var endAngle = 1.9 * Math.PI;
      var counterClockwise = true;

      context.beginPath();
      context.arc(x2, y2, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      context.fill()

      // line color
      context.strokeStyle = 'purple';
      context.stroke();
    </script>
  </body>
</html>