JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.lukej.me/kineticjs/5.1.0/kinetic.min.js"></script>
<div id="mycontainer"></div>

<canvas id="mycanvas" width="400" height="200" style="position: absolute; left: 0px; top: 250px">

JavaScript

var letters = [
    { symbol: "A", x: 3.0, size: 50 },
    { symbol: "B", x: 36.3, size: 75 },
    { symbol: "C", x: 86.3, size: 100 },
    { symbol: "D", x: 158.6, size: 125 },
    { symbol: "E", x: 248.9, size: 100 },
    { symbol: "F", x: 315.5, size: 75 },
    { symbol: "G", x: 361.3, size: 50 } ];
// How kineticjs renders the text
(function actual() {
    var stage = new Kinetic.Stage({ container: "mycontainer",  width: 400,  height: 200 }),
		layer = new Kinetic.Layer(),
        baseline = 120;
	letters.forEach(function(letter) { 
    	layer.add(new Kinetic.Text({
        	x: letter.x,
        	y: baseline - letter.size,
        	text: letter.symbol,
        	fontSize: letter.size,         
         	fill: 'black',
     	}));     
 	});
    // Baseline visualization
 	layer.add(new Kinetic.Line({
    	points: [0, baseline, 400, baseline ],
    	stroke: "red"
 	}));
 	stage.add(layer);
})();
// How I would like it to render the text
(function expected() {
    var c = document.getElementById("mycanvas"),
    	ctx = c.getContext("2d"),
        baseline = 120;
  	ctx.textBaseline = "alphabetic"; // redundant as it's actually default behaviour 	
 	letters.forEach(function(letter) {
        ctx.font = letter.size + "px Arial";
        ctx.fillText(letter.symbol, letter.x, baseline); 
    });    
    // Baseline visualization
    ctx.strokeStyle = "red";
 	ctx.moveTo(0, baseline);
 	ctx.lineTo(400, baseline);
 	ctx.stroke();
})()