JSFiddle - React, Tailwind, and code Playground

by nwellcome

HTML

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var gradCenter = 128;
var offset = 20;

context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = "rgb(132,132,132)";
context.fill();

var id = context.createImageData(1,1);
var d = id.data;
function drawWackyCircle(cx, cy, r) {
    for (var y = 0; y < r; y++) {
        var grad = gradCenter + Math.round((y / r) * gradCenter, 0);
        var x = Math.sqrt(r*r - y*y);
        for (var i = cx - x; i < cx + x; i++) {
            var lum = grad + (i / (cx + x)) * offset;
            d[0] = lum;
            d[1] = lum;
            d[2] = lum;
            d[3] = 255;
            context.putImageData(id, i, cy + y);
        }
    }
    for (var y = 0; y < r; y++) {
        var grad = gradCenter - Math.round((y / r) * gradCenter, 0);
        var x = Math.sqrt(r*r - y*y);
        for (var i = cx - x; i < cx + x; i++) {
            var lum = grad + (i / (cx + x)) * offset;
            d[0] = lum;
            d[1] = lum;
            d[2] = lum;
            d[3] = 255;
            context.putImageData(id, i, cy - y);
        }
    }
}

drawWackyCircle(55, 55, 50);
drawWackyCircle(50, 150, 20);
drawWackyCircle(150, 150, 45);