JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas' width='360' height='240'><</canvas>

CSS

canvas {
  border: solid 1px #6699cc;
}

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.font = 'italic 900 48px serif';
ctx.fillStyle = '#336699';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('我踏月色而來', 180, 120);
setTimeout(function() {
  alert('寬度：' + ctx.measureText('我踏月色而來').width);
}, 100);