JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="300" height="300"></canvas>

JavaScript

_canvas = document.getElementById('canvas');
_stage = _canvas.getContext('2d');

_stage.fillStyle = "#00FF00";
_stage.fillRect(0, 0, 300, 200);

var gradient = _stage.createLinearGradient(0, 200, 300, 300);
gradient.addColorStop(0, "blue");
gradient.addColorStop(.5, "white");
gradient.addColorStop(1, "blue");

_stage.fillStyle = gradient;
_stage.fillRect(0, 200, 300, 300);