JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

<p>Showing how to use CSS3 to create a background grid on a canvas.</p>
<p>Drawing on the canvas overlays on this image, and clearing the canvas does not include it. Basically the background is not part of the canvas, but always tiled behind it.</p>

CSS

canvas {
   background-color:#fff;
   background-image:
     -webkit-linear-gradient(      #999 1px, transparent 1px),
     -webkit-linear-gradient(0deg, #999 1px, transparent 1px);
   background-image:
     linear-gradient(       #999 1px, transparent 1px),
     linear-gradient(90deg, #999 1px, transparent 1px);
   background-size: 10px 10px,10px 10px;

   border:1px solid #999;
   border-width:0 1px 1px 0; /* right and bottom */
}

body { margin:1em }
p    { margin:1em 0 }

JavaScript

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

/* Draw a circle! */
ctx.fillStyle = '#c00';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.arc(100, 70, 40, 0, 2*Math.PI, false);
ctx.fill(); ctx.stroke();