JSFiddle - React, Tailwind, and code Playground

by Deepak Kumar

HTML

<body>
<canvas id="myCanvas">
Your browser does not support the HTML5 canvas tag.
</canvas>
              
<div id="lineContainer" class="lineContainer">
  <div id="numberLeftEnd" class="numberContainer">
  <div class="numberLeftEnd"></div>
  </div>
</div>
      
</body>

CSS

#myCanvas {
  position:absolute;
  float:left;
}
.lineContainer {
    position:absolute;
    float:left;
    width: 90%;
    margin-top:70px;
}
.line {
    border-top: 1px solid blue;
    border-right: 1px solid blue;
    width: 20px;
    Height: 10px;
    float: left;
    margin: 0;
    padding: 0;
}
.numberContainer {
    position: absolute;
    top: 10px;
    margin: 0;
    padding: 0;
}
.number {
    width: 21px;
    float: left;
    margin: 0;
    padding: 0;
    text-align: center;
}
  
.numberLeftEnd {
    width: 11px;
    Height: 5px;
    float: left;
    margin: 0;
    padding: 0;
}

JavaScript

var range = 16; /*You can take any value for ruler */

for (i = 0; i < range; i++) { 
	var div = document.createElement("div");
	div.innerHTML = i;
	div.className += "number"
	document.getElementById("numberLeftEnd").appendChild(div);

	var div2 = document.createElement("div2");
	div2.className += "line"
	document.getElementById("lineContainer").appendChild(div2);
}

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 70);
ctx.bezierCurveTo(10, -20, 200, -20, 200, 70);
ctx.lineJoin = "round";
ctx.moveTo(210, 50);
ctx.lineTo(200, 70);
ctx.lineTo(180, 55);
ctx.stroke();