colorwheel.js 0.2

HTML5 color picker. Working on the fallback images, and color computation from click coordinates.

HTML

<div class="colorpicker">
    <section class="colorwheel">
        <div id="colorblock"></div>
        
        <article id="colorwheel">
            <canvas id="surface"></canvas>
        </article>
    </section>
    
</div>

<pre id="color_selection"></pre>

CSS

body{ background-color: white; }

div.colorpicker{ 
    min-width:300px;
}

section * {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
section {
    display:inline-block;
}
.colorwheel #colorwheel {
    height:200px;
    width:200px;
    cursor: cell;
}
.colorwheel #colorblock {
    width: 97%;
    height:25px;
    margin:0px auto;
    border:1px solid black;
    margin-left:8%;
}
.colorwheel #surface {
    display:block;
}

#gamma_wrapper {
    background-color: white;
    padding:2px;
    border:1px solid black;
    cursor:vertical-text;
}

#gamma_slider {
    width:10px;
    height:180px;
    cursor: vertical-text;
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 57%, rgba(0,0,0,0.18) 62%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(57%,rgba(0,0,0,0.12)), color-stop(62%,rgba(0,0,0,0.18)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 57%,rgba(0,0,0,0.18) 62%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 57%,rgba(0,0,0,0.18) 62%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 57%,rgba(0,0,0,0.18) 62%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.12) 57%,rgba(0,0,0,0.18) 62%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}

JavaScript

/* config size & modify */
var config = {
    size: 250
};

(function(){
    document.getElementById('colorwheel').style.height = config.size+"px";
    document.getElementById('colorwheel').style.width = config.size+"px";
    document.getElementById('gamma_slider').style.height = (config.size-20)+"px";
})();

/* render color wheel canvas#surface */
(function () {
    var el = document.getElementById('surface'),
        context = el.getContext('2d'),
        width = el.parentNode.offsetWidth,
        height = el.parentNode.offsetHeight,
        cx = width / 2,
        cy = height / 2,
        radius = width / 2.3,
        imageData,
        pixels,
        hue, sat, value,
        i = 0,
        x, y, rx, ry, d,
        f, g, p, u, v, w, rgb;

    el.width = width;
    el.height = height;
    imageData = context.createImageData(width, height);
    pixels = imageData.data;

    for (y = 0; y < height; y = y + 1) {
        for (x = 0; x < width; x = x + 1, i = i + 4) {
            rx = x - cx;
            ry = y - cy;
            d = rx * rx + ry * ry;
            if (d < radius * radius) {
                hue = 6 * (Math.atan2(ry, rx) + Math.PI) / (2 * Math.PI);
                sat = Math.sqrt(d) / radius;
                g = Math.floor(hue);
                f = hue + g;
                u = 255 * (1 - sat);
                v = 255 * (1 - sat * f);
                w = 255 * (1 - sat * (1 - f));
                pixels[i] = [255, v, u, u, w, 255, 255][g];
                pixels[i + 1] = [w, 255, 255, v, u, u, w][g];
                pixels[i + 2] = [u, u, w, 255, 255, v, u][g];
                pixels[i + 3] = 255;
            } else {
                pixels[i] = 255;
                pixels[i + 1] = 255;
                pixels[i + 2] = 255;
                pixels[i + 3] = 255;
            }
        }
    }

    context.putImageData(imageData, 0, 0);
})();

/* some globals */
var color_selection;
var rgb = [255, 255, 255, 255];
var gamma = 1;

/* bind click to #surface...