JSFiddle - React, Tailwind, and code Playground

by Feroz Siddiqui

HTML

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(500,250);
ctx.lineTo(0,250);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle="red";
for(var i=1;i<20;i++){
ctx.rect(10+(i*24),10+(i*8),10,(250-(10+(i*8))));
ctx.stroke();
}

for(var i=1;i<20;i++){
ctx.beginPath();
ctx.strokeStyle="blue";
ctx.rect(10+(i*24),250,10,10+(i*5));
ctx.stroke();
}


ctx.beginPath();
ctx.strokeStyle="green"
ctx.font = "10px Arial";
ctx.strokeText("Hello World", 10, 50);
;


var text = ctx.measureText("Hello World");
ctx.fillRect(10, 50, text.width, 2);
ctx.moveTo(text.width/2,50);
ctx.lineTo(text.width/2,250);
ctx.stroke()


</script>

</body>
</html>