JSFiddle - React, Tailwind, and code Playground

by Andreas Renberg

HTML

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

CSS

#canvas {
    border:1px solid #000000;
}

JavaScript

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

var x = canvas.width / 2;
var y = canvas.height / 2 - 10;
var text = 'Hello, good wor_d!';

context.font = '30pt Calibri';
//context.textAlign = 'center';
context.fillStyle = 'blue';
context.fillText(text, 20, y);

// get text metrics
var metrics = context.measureText(text);
console.log(metrics);
var width = metrics.width;
//context.font = '20pt Calibri';
//context.textAlign = 'center';
//context.fillStyle = '#555';
//context.fillText('(' + width + 'px wide)', x, y + 40);

context.lineWidth = 0.5
//context.fillStyle = '#555555'
context.strokeStyle = '#000000'
context.beginPath();
context.moveTo(20, y);
context.lineTo(20+width, y);
context.stroke();