JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=400 height=300></canvas>

CSS

body {
            background-image:url("http://images4.fanpop.com/image/photos/23400000/water-water-23444632-2048-1277.jpg");
        }
        canvas {
            border:1px solid red;
            position:absolute
        }

JavaScript

var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = "black";
        ctx.rect(0, 0, canvas.width, canvas.height);
        ctx.fill();
        ctx.font = "144pt Verdana";
        ctx.globalCompositeOperation = "xor";
        ctx.beginPath();
        ctx.fillText("See", 30, 200);
        ctx.fill();
        ctx.restore();