JSFiddle - React, Tailwind, and code Playground

HTML

<canvas></canvas>

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,300,150);

var leftAngle = -135     /180*Math.PI; // radians!
var rightAngle = -45     /180*Math.PI;

//var g = ctx.createLinearGradient(0, 140, 0, 10);
var g = ctx.createRadialGradient(150,140,0,150,140,120);
g.addColorStop(0, 'rgba(1,1,1,0.5)');
g.addColorStop(1, 'rgba(1,1,1,0)');

ctx.fillStyle = g;
ctx.beginPath();
ctx.moveTo(150, 140);
ctx.arc(150, 140, 120, leftAngle, rightAngle, false);
ctx.fill();

ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(150, 140);
ctx.lineTo(150 + 135 * Math.cos(leftAngle), 140 + 135 * Math.sin(leftAngle));
ctx.stroke();

ctx.strokeStyle = 'white';
ctx.beginPath();
ctx.moveTo(150, 140);
ctx.lineTo(150, 5);
ctx.stroke();

ctx.strokeStyle = 'green';
ctx.beginPath();
ctx.moveTo(150, 140);
ctx.lineTo(150 + 135 * Math.cos(rightAngle), 140 + 135 * Math.sin(rightAngle));
ctx.stroke();