Generating A Canvas Color Picker With Full Rgb Space

Since RGB needs a cube for displaying all colors there are more ways to display all the colors. I would like to have a circle displaying all the colors in a rainbow at full color -

Solution 1:

It looks like you want an HSL colour rect, with the hue being selected from the colour wheel.

Here's a function i put together to draw the rect:

functiondraw(canvas, hue){
    var ctx = canvas.getContext('2d');
    for(row=0; row<100; row++){
        var grad = ctx.createLinearGradient(0, 0, 100,0);
        grad.addColorStop(0, 'hsl('+hue+', 100%, '+(100-row)+'%)');
        grad.addColorStop(1, 'hsl('+hue+', 0%, '+(100-row)+'%)');
        ctx.fillStyle=grad;
        ctx.fillRect(0, row, 100, 1);
    }   
}

Hopefully it does what you want. Example here: colour rect js fiddle

Solution 2:

If you like, you can also use a circle. I think it is easier to choose a color that way.

I made this: https://github.com/JeroenvO/html5-colorpicker

Maybe you can use it as a guide. I used only images with some opacity and no gradiënt calculations in javascript.