JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var cellWidth = 20;
var cellHeight = 20;

var canvasCWidth = 18;
var canvasCHeight = 4;

var canvasContainerId = 'c';

window.onload = function draw()
{
  var canvasWidth = cellWidth * (canvasCWidth + 6);
  var canvasHeight = cellHeight * (canvasCHeight + 8);
  var canvas = document.getElementById(canvasContainerId);
  
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  
  var ctx = canvas.getContext('2d');
  
  drawBG(ctx);
  
}

function drawBG(ctx)
{
  ctx.beginPath();
  
  for (i = 1; i <= canvasCWidth; i++)
  {
    for (j = 1; j <= canvasCHeight; j++)
    {
      ctx.strokeRect(cellWidth * i, cellHeight * j, cellWidth, cellHeight);
    }
  }
  
  ctx.closePath();
}