yard-maze-design-board

A field of dots

by Nicolaus Maloney

HTML

<canvas id='c'></canvas>

JavaScript

const width = 700;
const height = 700;
const numRows = 13;
const numCols = 13;
const color = 'blue';
const dotSize = 2;

const canvas = new fabric.Canvas('c', {
  width: width,
  height: height,
});
canvas.add(new fabric.Rect({
  top: -1,
  left: -1,
  height: height,
  width: width,
  stroke: 'grey',
  strokeWidth: 2,
  fill: false,
}));

const maxRowSpacing = Math.floor(height / (numRows + 1));
const maxColSpacing = Math.floor(width / (numCols + 1));
const spacing = Math.min(maxRowSpacing, maxColSpacing);

/* const opts = {
    stroke: `hsl(40, 100%, 50%)`,
    strokeWidth: 5,
    fill: false,
    strokeLineCap: 'round',
  };
;//const path = new fabric.Path(`M 10 10 L 50 50`, opts);    
canvas.add(path);*/

for (var column = 0; column < numCols; ++column) {
  for (var row = 0; row < numRows; ++row) {
    var circle = new fabric.Circle({
      radius: dotSize,
      fill: color,
      originX: 'center',
      originY: 'center',
      left: spacing * (1 + column),
      top: spacing * (1 + row),
    });
    canvas.add(circle);
  }
}