JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div class="background"></div>
<div class="foreground"></div>

CSS

.background {
    margin: 0;
    background: -webkit-linear-gradient(top left, red 0%, green 100%);
    display: block;
    content: "";
    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.foreground {
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.foreground canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

JavaScript

var foreground = document.querySelector('.foreground');
var canvas = document.createElement('canvas');
canvas.width = foreground.clientWidth;
canvas.height = foreground.clientHeight;
foreground.appendChild(canvas);
var context = canvas.getContext('2d');
context.fillStyle = "#000";
context.fillRect(0, 0, canvas.width, canvas.height);
context.globalCompositeOperation = 'destination-out';
context.fillStyle = "#fff";
context.font = "bold 120px 'Helvetica Neue'";
context.textAlign = 'center';
context.lineHeight = '1';
context.fillText("PARTY".split("").join(String.fromCharCode(8202)), canvas.width / 2, canvas.height / 2);

// TODO
// http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial
// https://gist.github.com/talltyler/5345894