JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<canvas id="myCanvas" width="578" height="200"></canvas>
	<canvas id="myCanvas2" width="578" height="200"></canvas>
</div>

CSS

#wrapper canvas {
			position: relative;
		}
		
		#wrapper canvas {
			border: 1px solid red;
			position: absolute;
			background-color: transparent;
		}

JavaScript

function drawRadial(elemId, startColor, endColor, x0, y0, r0, x1, y1, r1) {
	var canvas = document.getElementById(elemId);
	var context = canvas.getContext('2d');
	
	context.rect(0, 0, canvas.width, canvas.height);
	
	// create radial gradient
	var grd = context.createRadialGradient(x0, y0, r0, x1, y1, r1);
	grd.addColorStop(0, startColor);
	grd.addColorStop(1, endColor);
	
	context.fillStyle = grd;
	context.fill();
	
	delete canvas;
	delete context;
	delete grd;
}

drawRadial('myCanvas', 'rgba(248,173,133,1.0)', 'rgba(0,0,0,0.0)', 50, 25, 110, 300, 50, 400);
drawRadial('myCanvas2', 'rgba(213,215,155,1.0)', 'rgba(0,0,0,0.0)', 500, 150, 110, 500, 50, 600);