JSFiddle - React, Tailwind, and code Playground

by alexvestin

JavaScript

const scale = 16;

const canvas = document.createElement("canvas")
canvas.width = 2048;
canvas.height = 2048;
document.body.appendChild(canvas)
const ctx = canvas.getContext("2d");

let TILE_SIZE = 16;
let numTileLines = canvas.width / TILE_SIZE;

ctx.fillStyle = "white";
ctx.fillRect(0, 0, 2048, 2048);

ctx.strokeStyle = "black";
ctx.lineWidth = 4 / scale;

ctx.beginPath()
ctx.scale(scale, scale);

for(let i = 0; i < numTileLines; i++) {
	ctx.moveTo(0, i * TILE_SIZE);
	ctx.lineTo(2048, i * TILE_SIZE);
  
  ctx.moveTo(i*TILE_SIZE, 0);
  ctx.lineTo(i*TILE_SIZE, 2048);
}

ctx.stroke()

ctx.beginPath()
ctx.lineWidth = 1 / scale;
for(let i = 0; i < 2048; i++) {
	ctx.moveTo(0, i);
	ctx.lineTo(2048, i);
  
  ctx.moveTo(i, 0);
  ctx.lineTo(i, 2048);
}
ctx.stroke()