JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<canvas id="myCanvas" width="500" height="400">Canvas no worky :(</canvas>

JavaScript

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext("2d");

var image = new Image();
image.src = "http://images4.fanpop.com/image/photos/16000000/Beautiful-Cat-cats-16096437-1280-800.jpg";

image.onload = function () {
    ctx.drawImage(image, 0, 0, 500, 400);

    var grd = ctx.createRadialGradient(150, 150, 0, 0, 150, 200);
    grd.addColorStop(0, "rgba(255,255,0,1)");
    grd.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.arc(150, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();

    var grd = ctx.createRadialGradient(350, 150, 0, 350, 150, 200);
    grd.addColorStop(0, "rgba(255,255,0,1)");
    grd.addColorStop(1, "rgba(0,0,0,0)");
    ctx.beginPath();
    ctx.fillStyle = grd;
    ctx.arc(350, 150, 200, 0, Math.PI * 2, false)
    ctx.fill();
};