JSFiddle - React, Tailwind, and code Playground

by adeneo

HTML

<div id='wrapper'>
    <canvas id="c"></canvas>
</div>

CSS

#c {
    border: 7px solid black;
    border-radius: 50%;
}

#wrapper {
    width: 400px;
    height: 400px;
    position: relative;
    cursor: pointer;
}

#wrapper:active {
    //cursor: none;
}

#dragger {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: block;
    position: absolute;
    border: 2px solid black;
}

JavaScript

var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');


var wrapper = document.getElementById('wrapper');
var dragger = document.createElement('div');
dragger.id = 'dragger';
wrapper.appendChild(dragger);
wrapper.insertBefore(dragger, c);


document.body.clientWidth; // fix bug in webkit: http://qfox.nl/weblog/218

(function() {

    // Declare constants and variables to help with minification
    // Some of these are inlined (with comments to the side with the actual equation)
    var doc = document;
    doc.c = doc.createElement;
    b.a = b.appendChild;

    var width = c.width = c.height = 400,
        label = b.a(doc.c("p")),
        input = b.a(doc.c("input")),
        imageData = a.createImageData(width, width),
        pixels = imageData.data,
        oneHundred = input.value = input.max = 100,
        circleOffset = 0,
        diameter = width - circleOffset * 2,
        radius = diameter / 2,
        radiusPlusOffset = radius + circleOffset,
        radiusSquared = radius * radius,
        two55 = 255,
        currentY = oneHundred,
        currentX = -currentY,
        wheelPixel = circleOffset * 4 * width + circleOffset * 4;

    // Math helpers
    var math = Math,
        PI = math.PI,
        PI2 = PI * 2,
        sqrt = math.sqrt,
        atan2 = math.atan2;

    // Setup DOM properties
    b.style.textAlign = "center";
    label.style.font = "2em courier";
    input.type = "range";

    // Load color wheel data into memory.
    for (y = input.min = 0; y < width; y++) {
        for (x = 0; x < width; x++) {
            var rx = x - radius,
                ry = y - radius,
                d = rx * rx + ry * ry,
                rgb = hsvToRgb(
                    (atan2(ry, rx) + PI) / PI2, // Hue
                    sqrt(d) / radius, // Saturation
                    1 // Value
                );

            // Print current color, but hide if outside the area of the circle
           ...