JSFiddle - React, Tailwind, and code Playground

by STHayden

JavaScript

var char = '👩🏽‍⚕️';
var canvas1 = document.createElement('canvas');
canvas1.style.border = "1px solid red"
document.querySelector('body').appendChild(canvas1)
canvas1.height = 350
canvas1.width = 1200
var ctx1 = canvas1.getContext('2d');

ctx1.font = '257px Verdana';
ctx1.fillText(char, 0, 257);
var fullWidth = ctx1.measureText(char).width;

var canvas2 = document.createElement('canvas');
canvas2.style.border = "1px solid red"
document.querySelector('body').appendChild(canvas2)
canvas2.height = 350
canvas2.width = 1200
var ctx2 = canvas2.getContext('2d');
ctx2.font = '227px Verdana';
ctx2.fillText(char, 0, 227);
var smallWidth = ctx2.measureText(char).width;


//ctx1.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
ctx1.drawImage(canvas2, 0, 0, smallWidth, 227, 0, 10, fullWidth, 257);