JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="panel" width="16" height="9">
</canvas>

CSS

#panel{
				display: block;
				width: 100%;
				height: 100%;
			}
			
			#image{
				width: 64;
				height: 36;
			}

JavaScript

var src = "http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg";

var canvas=document.getElementById("panel");
canvas.width = window.width;
canvas.height = window.height;
var context=canvas.getContext("2d");
// Create gradient
var gradient=context.createRadialGradient(canvas.width/2,canvas.height/2,5,canvas.width/2,canvas.height*(4/5),canvas.height);
gradient.addColorStop(0,"#a8a8a8");
gradient.addColorStop(1,"#353535");


// Fill with gradient
context.fillStyle=gradient;
context.fillRect(0,0,canvas.width,canvas.height);


var img = new Image();
img.onload = function() {	
	
	context.drawImage(img, canvas.width/2-img.width/2, canvas.height/7-img.height/2, canvas.width/10, canvas.height/10);      
}

img.src = src;