JSFiddle - React, Tailwind, and code Playground

by amit6june

HTML

<table border=0><tr><td>
<canvas id="myCanvas" width="300" height="150" style="border:0px"></canvas>
    </td></tr><tr><td>
<canvas id="myCanvas1" width="300" height="300" style="border:0px"></canvas>
    </td></tr>
</table>


<div class="verticalLine">

some other content

</div>

CSS

.verticalLine {
    border-left: thick solid #ff0000;
}

JavaScript

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//ctx.fillStyle = "#";
ctx.beginPath();
ctx.arc(120,75,50,0,2*Math.PI);


ctx.font = "30px Arial";
ctx.fillText("May",10,50);

//ctx.fill();
//ctx.fillText("Canvas", 100, 130);

ctx.stroke();
var c1=document.getElementById("myCanvas1");
var ctx1=c1.getContext("2d");
ctx1.beginPath();
ctx1.arc(120,175,80,0,2*Math.PI);

ctx1.stroke();