JSFiddle - React, Tailwind, and code Playground

by Tinclon

HTML

<canvas id="canvas"></canvas>

CSS

#canvas {
  background-color: lightgrey;   
}

JavaScript

var boxSize = 600;
var lineWidth = 3;
document.getElementById('canvas').setAttribute('width', (boxSize + lineWidth));
document.getElementById('canvas').setAttribute('height', (boxSize + lineWidth));
context = document.getElementById('canvas').getContext("2d");

for(var i = 0 ; i <= 20 ; i++) {
    context.fillRect(0, i * (boxSize / 20), boxSize + lineWidth, lineWidth);
    context.fillRect(i * (boxSize / 20), 0, lineWidth, boxSize + lineWidth);
}