JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas"></canvas>
<!--nondefault.net-->

JavaScript

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 400;
var ctx = canvas.getContext("2d");

//make some background noise
ctx.fillStyle = "white";
ctx.fillRect(0,0,canvas.width,canvas.height);
for (var i=0; i<100; i++) {
    var x = Math.random()*canvas.width-50,
        y = Math.random()*canvas.height-50;
    var w = Math.random()*50+50,
        h = Math.random()*50+50;
    ctx.fillStyle = "hsl("+(~~(Math.random()*360))+", 60%, 50%)";
    ctx.fillRect(x, y, w, h);
}

//inverted text
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white";
ctx.font = "100px sans-serif";
ctx.textAlign = "center";
ctx.fillText("Inverted!",canvas.width*0.5,canvas.height*0.5);