JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

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


ctx.font = "bold 11pt Helvetica, Arial, sans-serif";
ctx.translate(10, 0);

drawSomeText();

var badScale = 0.7608579845306417;
ctx.scale(badScale, badScale);
drawSomeText();

ctx.scale(2*badScale, 2*badScale);
drawSomeText();

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