JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="578" height="200"></canvas>

CSS

canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var x = canvas.width / 2;
      var y = canvas.height / 2 - 10;
      var text = 'I M @ CENTER!';

      context.font = '10pt Calibri';//try changing values 10,15,20
      context.textAlign = 'center';
      context.fillStyle = 'red';
      context.fillText(text, x, y);

      // get text metrics