JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  box-sizing: border-box;
  border: 1px solid red;
}

JavaScript

var
  canvas = document.querySelector('canvas'),
  ctx = canvas.getContext("2d"),
  text = "Apples"

ctx.font = "small-caps 44px Arial";

canvas.width = ctx.measureText(text).width;

ctx.font = "small-caps 44px Arial";

ctx.textBaseline = 'middle';
ctx.fillText(text, 0, canvas.height / 2);