JSFiddle - React, Tailwind, and code Playground

HTML

<canvas height="500" width="500" id="graph"></canvas>

JavaScript

var canvas = document.getElementById('graph');

var context = canvas.getContext('2d');

var height = canvas.height;
var width = canvas.width;

for (var y = 0.5; y < height; y += 10) {
  context.moveTo(0, y);
  context.lineTo(width, y);
}

for (var x = 0.5; x < width; x += 10) {
  context.moveTo(x, 0);
  context.lineTo(x, height);
}

context.strokeStyle = "#eee";
context.stroke();

var gradient = context.createLinearGradient(0, 250, 0, 500);
gradient.addColorStop(0, '#f00');
gradient.addColorStop(1, '#0f0');

context.fillStyle = gradient;
context.fillRect(10, 250, 20, 250);

context.fillRect(40, 375, 20, 125);