JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

			//rect
			ctx.fillStyle='yellow';
			ctx.fillRect(0,0,50,75);
			


			//circle
			var centerX = c.width / 2;
			var centerY = c.height / 2;
			var radius = 70;

			ctx.beginPath();
			ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
			
			ctx.fillStyle = 'green';
			ctx.fill();
			
			ctx.lineWidth = 15;
			ctx.strokeStyle = 'red';
			ctx.stroke();

			//text
			ctx.font="30px Arial";
			ctx.fillStyle = 'magenta';
			ctx.fillText("Hello World",300,50);	
			
			ctx.strokeStyle = 'lime';
			ctx.lineWidth = 1;
			ctx.strokeText("Hello World",300,120);	
			
			ctx.shadowColor = "navy";
			ctx.shadowOffsetX = 5;
			ctx.shadowOffsetY = 5;
			ctx.shadowBlur = 5;
			ctx.strokeText("Shadow text", 500, 400);	
			ctx.shadowOffsetX = 0;
			ctx.shadowOffsetY = 0;
			ctx.shadowBlur = 0;			
			
			//line
			ctx.moveTo(50,75);
			ctx.lineTo(200,100);
			ctx.stroke();				

			//text baseline
			ctx.fillStyle = "#F00";
			ctx.font      = "16px Verdana";

			ctx.lineWidth  = 1;
			ctx.beginPath();
				ctx.moveTo(0, 375);
				ctx.lineTo(500, 375);
				ctx.stroke();
			ctx.closePath();

			ctx.textBaseline = "top";
			ctx.fillText("top", 0, 375);

			ctx.textBaseline = "hanging";
			ctx.fillText("hanging", 40, 375);

			ctx.textBaseline = "middle";
			ctx.fillText("middle", 120, 375);

			ctx.textBaseline = "alphabetic";
			ctx.fillText("alphabetic", 200, 375);

			ctx.textBaseline = "ideographic";
			ctx.fillText("ideographic", 300, 375);

			ctx.textBaseline = "bottom";
			ctx.fillText("bottom", 400, 375);


			ctx.fillStyle = "#F00";
			ctx.lineWidth  = 1;
			ctx.beginPath();
				ctx.moveTo( 250, 0);
				ctx.lineTo( 250, 250);
				ctx.stroke();
			ctx.closePath();

			ctx.font      = "16px Verdana";

			ctx.textAlign = "center";
			ctx.fillText("center", 250, 20);

			ctx.textAlign = "start";
			ctx.fillText("start", 250, 40);

			ctx.textAlign = "end";
			ctx.fillText("end", 250,...