JSFiddle - React, Tailwind, and code Playground

HTML

<div class="two">awesome</div>

<nav id="cool">mewmewmew</nav>
<aside class="two">wowee</aside>

CSS

html,body{
		margin: 0;
		padding: 0;
	}
	div.two{
		background-color: red;
		z-index: 1;
		height: 300px;
}
nav{
	background-color: yellow;
	z-index: 1;
	height: 20px;
	width: 100px;

	border-radius: 8px;
}
aside{
	background-color: blue;
	z-index: 1;
}

#some_canvas{
     background: tomato;   
}
}

JavaScript

var a = document.createElement('canvas');
createCanvas();
function createCanvas(){
    a.height = $(window).height();
    a.width = $(window).width();
    a.id = "some_canvas";
    a.style.opacity = "0.8";
    a.style.position = "absolute";
    
  document.body.insertBefore(a,document.body.firstChild);
    
    context = a.getContext("2d");
    context.fillStyle = "#000000";
    context.fillRect(0, 0, a.width, a.height);   
}

$(window).resize(function(){
    $("some_canvas").remove(); 
    createCanvas();
});
$(window).scroll(function(){
    $("#some_canvas").remove();
    createCanvas();
});