JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://minthatheater.com/scripts/jcanvas.js"></script>
<script src="http://minthatheater.com/scripts/context_blender.js"></script>
<canvas width="300" height="225"></canvas>

SCSS

canvas { display:block; margin:1em auto; border:1px solid #ccc }

JavaScript

$(function() {
  var canvas, gradient, ocontext, overlay, ucontext;
  canvas = $("canvas");
  overlay = $("<canvas></canvas>");
  ocontext = overlay.get(0).getContext('2d');
  ucontext = canvas.get(0).getContext('2d');

  gradient = canvas.gradient({
           x1: 0,
           y1: 50,
           x2: 0,
           y2: 150,
           c1: "rgba(0,0,0,0)",
           c2: "#00f"
  });
  ucontext.fillStyle = '#090';
  ucontext.fillRect(0,0,200,200);
  overlay.drawRect({
    fillStyle: gradient,
    x: 50,
    y: 50,
    width: 200,
    height: 200,
    fromCenter: false
  });
  return ocontext.blendOnto(ucontext, 'add');
});