JSFiddle - React, Tailwind, and code Playground

by Bacher

HTML

<canvas width="600" height="600" style="width:300px;height:300px"></canvas>

JavaScript

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const scale = 199;

ctx.scale(2, 2);

ctx.fillText(`Scale: ${scale}`, 4, 16);

/* ctx.translate(10, 0); */
ctx.translate(150, 150);
ctx.scale(scale, scale);
/* ctx.scale(-1, -1); */

ctx.font = `${(48 / scale)}px serif`;
ctx.textAlign='center';
ctx.fillText('Hello world', 0, 0);