JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

JavaScript

var canvas = document.createElement("canvas");
canvas.width = 1000;
canvas.height = 500;
var ctx = canvas.getContext("2d");

function DrawGradient(x, y, width, r, g, b) {
    var halfWidth = width;
    var halfHeight = canvas.height / 2;
    var gradientCenterX = x != undefined ? x : halfWidth;
    var gradientCenterY = y != undefined ? y : halfHeight;
    document.body.appendChild(canvas);
    var grad = ctx.createRadialGradient(
    x, y, 0,
    x, y, halfWidth / 4.0);
    var stops = {
        0: 'RGB(' + r + ',' + g + ',' + b + ')',
        1: 'RGBA(' + r + ',' + g + ',' + b + ',0)'
    };

    for (var position in stops) {
        var color = stops[position];

        grad.addColorStop(position, color);
    }

    // draw gradient
    ctx.fillStyle = grad;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
DrawGradient(50, 50, 200, 0, 255, 255);
DrawGradient(50, 100, 200, 255, 0, 255);
DrawGradient(100 - Math.sqrt(50), 75, 200, 255, 255, 0);
var grad = ctx.createLinearGradient(0, 0, 1000, 1);
grad.addColorStop(0, 'RGB(0,255,255)');
grad.addColorStop(1.0 / 6.0, 'RGB(0,0,255)');
grad.addColorStop(2.0 / 6.0, 'RGB(255,0,255)');
grad.addColorStop(3.0 / 6.0, 'RGB(255,0,0)');
grad.addColorStop(4.0 / 6.0, 'RGB(255,255,0)');
grad.addColorStop(5.0 / 6.0, 'RGB(0,255,0)');
grad.addColorStop(1, 'RGB(0,255,255)');
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 1000, 100);