JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="280" height="500"></canvas>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');


ctx.translate(10, 0);

ctx.font = "bold 28px Helvetica, Arial, sans-serif";
drawSomeText();
ctx.font = "bold 14px Helvetica, Arial, sans-serif";
ctx.scale(2, 2);
drawSomeText();

var badScale = 0.7608579845306417;


function drawSomeText() {
    ctx.translate(0, 25);
    ctx.fillText("Needs better samples?", 0, 0)
    ctx.translate(0, 25);
    ctx.fillText("The quick brown fox jumps over the", 0, 0)
    ctx.translate(0, 25);
    ctx.fillText("Wizard People, dear reader", 0, 0)
    ctx.translate(0, 25);
    ctx.fillText("Aardvarks are adorable", 0, 0)
    ctx.translate(0, 25);
    ctx.fillText("Nissan nasreddin reddit and fisichelli", 0, 0)
}