JSFiddle - React, Tailwind, and code Playground

HTML

<canvas class="background"></canvas>
<div class="transformed">Hello!</div>

CSS

body {
    margin: 0;
    padding: 0;
}
.background {
    position: absolute;
}

.transformed {
    position: absolute;
    transform-origin: top-left;
    top: 100px;
    left: 100px
}

JavaScript

// Get a reference to the canvas and its context
var $canvas = $("canvas");
var ctx = $canvas[0].getContext('2d');

// Make the canvas fullscreen
var width = $(window).width(),
    height = $(window).height();
$canvas.attr({
    width: width,
    height: height
});

// In Chrome, modifying the canvas context in any way
// seems to force a hardware-accelerated transform
// on the text.
// (The text is scaled as a texture, becoming blurrier.)

// Uncomment the line below and compare the difference.
// ctx.fillStyle = "grey";

// Set up a simple zoom animation on our "Hello!" div
var $div = $(".transformed");
var scale = 1;
setInterval(function () {
    scale += 0.005;
    $div.css({
        transform: "translate(0px, 0px) scale("+scale+")"
    });
}, 16);