JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<canvas width=256 height=256></canvas>

JavaScript

var ctx = $('canvas').get(0).getContext('2d');

function circle(x, y, r, c) {
    ctx.beginPath();
    var rad = ctx.createRadialGradient(x, y, 1, x, y, r);
    rad.addColorStop(0, 'rgba('+c+',1)');
    rad.addColorStop(1, 'rgba('+c+',0)');
    ctx.fillStyle = rad;
    ctx.arc(x, y, r, 0, Math.PI*2, false);
    ctx.fill();
}

ctx.fillRect(0, 0, 256, 256);

circle(128, 128, 200, '255,0,0');
circle(64, 64, 30,    '0,255,0');