JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

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

ctx.font = "20px 'arial'";

ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

var x = 20;

ctx.strokeStyle = "rgba(0,0,0,0.4)";
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, ctx.canvas.height);
ctx.closePath();
ctx.stroke();

ctx.textAlign = "left";
ctx.fillText("Test 1", x, 20);

ctx.textAlign = "center";
ctx.fillText("Test 2", x, 40);

ctx.textAlign = "right";
ctx.fillText("Test 3", x, 60);