JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="250" height="250"></canvas>

CSS

html, body {width:100%; height:100%;margin:0;padding:0;}

JavaScript

function drawOnCanvas(y){
    ctx.beginPath();    
    ctx.moveTo(0,y);
    ctx.lineTo(20,y);
    ctx.stroke();
}
function drawRuler(){
    var ppm = 8.602150744349842,
        count = Math.floor(c.height / ppm);
    
    for(var i=0; i<count; i++){         
      var topPos = (5 + i*ppm);
      drawOnCanvas(Math.floor(topPos)+.5);     
    };
    
}
function resizeCanvas(){
   c.width = document.body.clientWidth - 5,
   c.height = document.body.clientHeight - 5;
}

var c = document.getElementById("myCanvas");
var ctx= c.getContext("2d");
ctx.lineWidth = 1;

resizeCanvas();
drawRuler();