circlesArray.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw() {
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');

          window.addEventListener('resize', resizeCanvas, false);

          function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            // Redraw everything after resizing the window

            for (var i = 0; i < 10; i++) {
              for (var j = 0; j < 100; j++) {
                ctx.beginPath();
                var x = 25 + j * 50; // x coordinate
                var y = 25 + i * 50; // y coordinate
                var radius = 20; // Arc radius
                var startAngle = 0; // Starting point on circle
                var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
                var counterclockwise = i % 2 !== 0; // clockwise or counterclockwise

                ctx.arc(x, y, radius, startAngle, endAngle, counterclockwise);

                if (i > 1) {
                  ctx.fill();
                } else {
                  ctx.stroke();
                }
              }
            }

          }
          resizeCanvas();

        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>