JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="578" height="400"></canvas>
<div><h1>TEXT<h1></div>

CSS

/* canvas, img {
    display:block;
    margin:1em auto;
    border:1px solid black;
} */
canvas {
    background:url('../img/spiral_galaxy-1920x1080.jpg');
    background-size: cover;
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	z-index:-1;
}
div{
   width:200px;
    height:200px;
    background:rgba(0,0,0,0.5);
    position: fixed;
    top: 20%;
    left: 20%;
}

JavaScript

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var x = 0;
var y = 0;
var width = window.innerWidth;
var height = window.innerHeight;
var imageObj = new Image();
console.log(window.innerWidth + "----" + window.innerHeight);

//Create another canvas to darw a resized image to.
var imageResized = document.createElement('canvas');
imageResized.width = width;
imageResized.height = height;
//Wait for the original image to low to draw the resize.
imageObj.onload = function() {
    //Find hoe mauch to scale the image up to cover.
    var scaleX = width / imageObj.width;
    var scaleY = height / imageObj.height;
    var scaleMax = Math.max(scaleX, scaleY);
    var ctx = imageResized.getContext('2d');
    ctx.scale(scaleMax, scaleMax);
    ctx.drawImage(imageObj, 0, 0);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';


function writeMessage(canvas, message, x, y) {
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, 60, 0, 2 * Math.PI);
    //context.stroke();
	//
	
}

function fadeOut(canvas, message, x, y, amount) {    
    var context = canvas.getContext('2d');
    context.clearRect(0, 0, canvas.width, canvas.height);
    
    var pattern = context.createPattern(imageResized, 'no-repeat');//Use imageResized, not imageObj.
    context.fillStyle = pattern;
    context.fill();    
    
    context.font = '28pt Calibri';
    context.fillStyle = 'black';
    //context.fillText(message, x, y);
    context.beginPath();
    context.arc(x, y, amount, 0, 2 * Math.PI);
    //context.stroke();
	//
    if (amount > 0) {
       ...