JSFiddle - React, Tailwind, and code Playground

CSS

canvas {
    border: 1px solid magenta;
  }
  
  img {
    border: 1px solid cyan;
  }

JavaScript

function draw(ctx) {
  ctx.font = "100px impact";
  // ctx.font = "10vw impact";
  // ctx.font = "10em impact";
  console.log(ctx.font); // Depending on browser, this is inconsistent
  // What SHOULD it be for vw units with a disconnected document?
  // Setting the font at ALL on firefox for ctx2 give an NS_ERROR_FAILURE
  // Text rendering simply doesn't work for ctx2 in chrome
  // Safari 'px' works, but vw and em produce inconsistent results
  ctx.fillText("hello", 100, 100);
  ctx.fillRect(0, 0, 100, 100);
}

const canvas = document.createElement('canvas');
document.body.appendChild(canvas);
const ctx1 = canvas.getContext('2d');

const x = new Document();
//
const canvas2 = x.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
const ctx2 = canvas2.getContext("2d");

draw(ctx1);
draw(ctx2);

canvas2.toBlob((blob) => {
  const newImg = document.createElement('img');
  const url = URL.createObjectURL(blob);

  newImg.src = url;
  document.body.appendChild(newImg);
});