JSFiddle - React, Tailwind, and code Playground

by Rajesh Danabal

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

var cw=canvas.width;
var ch=canvas.height;

var rotation = 0;

ctx.translate(0.50,0.50);
ctx.beginPath();
ctx.moveTo(cw/2,0);
ctx.lineTo(cw/2,ch);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0,ch/2);
ctx.lineTo(cw,ch/2);
ctx.stroke();

ctx.save();

ctx.textAlign="center";
ctx.textBaseline="middle";

ctx.translate(150,150);
ctx.rotate(rotation);
ctx.font="18px verdana";
ctx.fillText("Hello World!",0,0);

ctx.restore();