JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="400" height="400">
    Canvas was unable to start up.
</canvas>

<button onclick="resize()">Click me</button>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var originalWidth = canvas.width;
var originalHeight = canvas.height;

render = function()
{
    context.fillStyle = "#DDD";
    context.fillRect(0,0, originalWidth * (canvas.width / originalWidth), originalHeight * (canvas.height / originalHeight));
    
    context.fillStyle = "#000";
    var fontSize = 48 * (canvas.width / originalWidth);
 	context.font = fontSize+"px serif";
  	context.fillText("Hello world", 100 * (canvas.width / originalWidth), 200 * (canvas.height / originalHeight));   
}

resize = function()
{
    canvas.scale = 2;
    canvas.update();
    render();
}

render();