JSFiddle - React, Tailwind, and code Playground

by farazshaikh

HTML

<canvas width="400px" height="400px"></canvas>

CSS

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #121212;
}

canvas {
  border: 1px solid white;
}

JavaScript

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const drawGrid = function () {
		const gridDimentions = {
			width: 50,
			height: 50,
		};

			ctx.beginPath();
			ctx.save();
      
			for (var x = 0; x <= canvas.width; x += gridDimentions.width) {
				ctx.moveTo(0.5 + x, 0);
				ctx.lineTo(0.5 + x, canvas.height);
			}

			for (var x = 0; x <= canvas.height; x += gridDimentions.height) {
				ctx.moveTo(0, 0.5 + x);
				ctx.lineTo(canvas.width, 0.5 + x);
			}

			ctx.strokeStyle = '#606060';
			ctx.lineWidth = 1;
			ctx.stroke();
      
      ctx.beginPath();
      ctx.moveTo(gridDimentions.width * 3, canvas.height - gridDimentions.height * 3);
ctx.lineTo(canvas.width - gridDimentions.width * 3, gridDimentions.height * 3);
			      
			      ctx.strokeStyle = '#d35d6e';
			ctx.lineWidth = 1;
			ctx.stroke(); 
	}
  

drawGrid()