JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='canvas'></canvas>

CSS

canvas { width: 100%; height: 200px; background: black; }

JavaScript

(function() {
    
        //set up canvas and rectangle
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.rect(40, 50, 100, 70);
    
        //set up gradient and fill
        var grd = ctx.createLinearGradient(0, 50, 0, 120);
        grd.addColorStop(0, "red");
        grd.addColorStop(1, "blue");
        ctx.fillStyle = grd;
        ctx.fill();
    
})();