JSFiddle - React, Tailwind, and code Playground

by robert_schutt

HTML

<div class="container">
    <canvas id="gradient" width="500" height="500" tabindex="1"></canvas>
</div>

JavaScript

// canvas color picker

// based on something found on the web...

// Get angle color function
function getAngleColor(angle) {
    var color, d;

    if (angle < Math.PI * 2 / 5) { // angle: 0-72
        d = 255 / (Math.PI * 2 / 5) * angle;
        color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
    } else if (angle < Math.PI * 4 / 5) { // angle: 72-144
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
        color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
    } else if (angle < Math.PI * 6 / 5) { // angle: 144-216
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
        color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
    } else if (angle < Math.PI * 8 / 5) { // angle: 216-288
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
        color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
    } else { // angle: 288-360
        d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
        color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
    }
    return color;
}

// inner variables
var iSectors = 360;
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians

// Draw radial gradient function
function drawGradient() {

    // prepare canvas and context objects
    var canvas = document.getElementById('gradient');
    var ctx = canvas.getContext('2d');

    // clear canvas
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    // save current context
    ctx.save();

    // move to center
    ctx.translate(canvas.width / 2, canvas.height / 2);

    // start and end angles (in radians)
    var startAngle = 0;
    var endAngle = startAngle + iSectorAngle;
    
    // radius for sectors
    var radius = (canvas.width / 2) - 1;
    
    ctx.lineWidth = 1;
    
    // draw all sectors
    for (var i = 0; i < iSectors; i++) {

        // get angle color
        var color =...