[JavaScript] Draw Grid of Dots using Canvas


Exercise to draw 3x3 grid of dots via HTML Canvas.

HTML:

<canvas id="gridDots" width="300" height="300"></canvas>

JavaScript:

var c = document.getElementById("gridDots");
var ctx = c.getContext("2d");

var n = 3; // 3x3 grid of dots

for (var i=0; i<n; i++) {
  for (var j=0; j<n; j++) {
    var gridXSideLength = c.width/n;
    var gridYSideLength = c.height/n;
    var x = (gridXSideLength/2) * (i+1);
    var y = (gridYSideLength/2) * (j+1);
    var r = Math.min(gridXSideLength, gridYSideLength) / (n*2);
    var sAngle = 0;
    var eAngle = 2*Math.PI;

    ctx.beginPath();
    ctx.arc(x, y, r, sAngle, eAngle);
    ctx.closePath();
    ctx.stroke();
  }
}

References:

[1]
[2]
[3]