JSFiddle - React, Tailwind, and code Playground

by godfrzero

HTML

<canvas id='canvas' height="300" width="300"></canvas>

CSS

canvas {
  border: solid thin black;
  height: 150px;
  width: 150px;
}

JavaScript

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const rootStyles = {
	fillStyle: 'black',
  font: '14px "Lucida Console"'
};

ctx.scale(window.devicePixelRatio, window.devicePixelRatio);

function drawText (text, styles = {}) {
  ctx.fillStyle = styles.fillStyle || rootStyles.fillStyle;
  ctx.font = styles.font || rootStyles.font;
  
  let contentBox = ctx.measureText(text);
  
  ctx.fillText(text, 5, contentBox.actualBoundingBoxAscent + 5);
}

drawText('Hello, world!');