JSFiddle - React, Tailwind, and code Playground

by sszilvasi

HTML

<canvas id="canvas" width="200" height="200">
  This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

CSS

canvas {
    border: 1px dashed black;
}

JavaScript

var my_canvas = document.getElementById('canvas'),
    ctx = my_canvas.getContext("2d");
    
// ctx.moveTo(20, 20);
// ctx.lineTo(100, 20);

// outline
ctx.strokeStyle = '#000';
ctx.strokeRect(20,20,90,50);

// title
const text = "Example text";
const textMetrics = ctx.measureText(text);

//ctx.fillRect(20, 20-10, textMetrics.width, 10);
ctx.strokeRect(20, 20-10, textMetrics.actualBoundingBoxRight, 10);


ctx.font = "10px Helvetica";
ctx.fillStyle = "#555";
ctx.textBaseline = "bottom";

ctx.fillText(text, 20, 20);


//const textMetrics = ctx.measureText(text);
console.log(textMetrics);
//ctx.fillText(textMetrics.width, 20, 20); */