JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="circly" width="400" height="400" ></canvas>

JavaScript

tile = [];
for (var x = 0; x < 400; x++) {
    tile[x] = tile[x] || {};
}

circle(50, 75, 25, 50);
//50% faster than circle
circle2(125, 75, 25, 50);

torch(200, 75, 200);

function circle(origx, origy, radiusx, radiusy) {
    for(var y=-radiusy; y<=radiusy; y++)
        for(var x=-radiusx; x<=radiusx; x++)
            if(x*x/(radiusx*radiusx+radiusx)+y*y/(radiusy*radiusy+radiusy) <= 1)
                tile[origx+x][origy+y] = 1;
}

function torch(origx, origy, radius) {
    var v = 4;
    for(var y=-radius; y<=radius; y++)
        for(var x=-radius; x<=radius; x++)
            if(x*x/(radius)+y*y/(radius)<= 1)
                tile[origx+x][origy+y] = v / (1 + Math.sqrt(x * x + y * y + v * v));   
}

function circle2(xc, yc, a, b) { 
    var x = 0;
    var y = b;
    var width = 1;
    var a2 = a*a;
    var b2 = b*b;
    var crit1 = -(a2/4 + a%2 + b2);
    var crit2 = -(b2/4 + b%2 + a2);
    var crit3 = -(b2/4 + b%2);
    var t = -a2*y; 
    var dxt = 2*b2*x;
    var dyt = -2*a2*y;
    var d2xt = 2*b2;
    var d2yt = 2*a2;

    while (y>=0 && x<=a) {
        if (t + b2*x <= crit1 || t + a2*y <= crit3) {
            x++; dxt += d2xt; t += dxt; 
            width += 2;
        } else if (t - a2*y > crit2) {
            line(xc-x, yc-y, width);
            if (y!=0)
                line(xc-x, yc+y, width);
            y--; dyt += d2yt;  t += dyt; 
        } else {
            line(xc-x, yc-y, width);
            if (y!=0)
                line(xc-x, yc+y, width);
            x++; dxt += d2xt; t += dxt; 
            y--; dyt += d2yt; t += dyt; 
            width += 2;
        }
    }
    if (b == 0)
        line(xc-a, yc, 2*a+1);
}

function line(x, y, w) {
    for (var i = 0; i < w; i++) {
        tile[x + i][y] = 1;
    }    
}

circly = document.getElementById('circly').getContext('2d');

for (var x = 0; x < 400; x++) {
    for (var y = 0; y < 400; y++) {
        if(tile[x][y] > 0) {
            circly.fillStyle = "rgba(0,0,0," + tile[x][y] + ")";
           ...