JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<body>
<div id="myDiv" style="width:300px;height:150px;border:1px solid #d3d3d3;background:linear-gradient(360deg,rgb(255,0,0) 0%, rgb(255,255,255) 100%"> </div>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> </canvas>
</body>
</html>

JavaScript

var canvas = document.getElementById("myCanvas");
var ctx = document.getElementById("myCanvas").getContext("2d");
var w = canvas.width;
var h = canvas.height;
var cx = w / 2;
var cy = h / 2;
var cssAng = 360;
var canAng = cssAng - 90;
var ang = (canAng - 90) * (Math.PI / 180);
var hypt = cy / Math.cos(ang);
var fromTopRight = cx - Math.sqrt(hypt * hypt - cy * cy);
var diag = Math.sin(ang) * fromTopRight;
var len = hypt + diag;
var topX = cx + Math.cos(-Math.PI / 2 + ang) * len;
var topY = cy + Math.sin(-Math.PI / 2 + ang) * len;
var botX = cx + Math.cos( Math.PI / 2 + ang) * len;
var botY = cy + Math.sin( Math.PI / 2 + ang) * len;
var gr = ctx.createLinearGradient(topX,topY,botX,botY);
gr.addColorStop(0, "rgb(255, 0, 0)");
gr.addColorStop(1, "rgb(255, 255, 255)");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);