[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] |