JSFiddle - React, Tailwind, and code Playground

by DeadByElpy

HTML

<canvas id="myCanvas"></canvas>

JavaScript

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

//Draw a red line at y=100
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();

ctx.font="20px Arial"

//Place each word at y=100 with different textBaseline values
ctx.textBaseline="top"; 
ctx.fillText("Children's entertainment ...",50,50); 
ctx.textBaseline="bottom"; 
ctx.fillText("Children's entertainment ...",50,50); 
ctx.textBaseline="middle"; 
ctx.fillText("Middle",120,100); 
ctx.textBaseline="alphabetic"; 
ctx.fillText("Alphabetic",190,100); 
ctx.textBaseline="hanging"; 
ctx.fillText("Children's entertainment ...",50,50);