Creating colorpicker on HTML5 canvas

Question

How to draw a colorpicker on HTML5 canvas?

Answer 1

I created a solution for you on HCT. You can see it here:

http://www.html5canvastutorials.com/labs/html5-canvas-color-picker/

The idea is to find a color picker image that you like and then draw it on the canvas. On the mousedown event, we can get the mouse coordinates and then use the image data of the color picker image to pick out the color.

Hope this helps!

Answer 2

You have to draw the colors manually. Then you need to listen for mouseclick in that area, and then get the color at the click position.

The biggest problem is how to draw the colors. There are a few examples in Drawing Color Spectrums.

Answer 3

A basic example would be using getImageData: http://jsfiddle.net/eGjak/60/.

var ctx = $('#cv').get(0).getContext('2d');

for(var i = 0; i < 30; i++) {
    for(var j = 0; j < 30; j++) {
        ctx.fillStyle = 'rgb(' + 
            ((i/30*255)|0) + ',' + 
            ((j/30*255)|0) + ',' +
            '0)';

        ctx.fillRect(i * 10, j * 10, 10, 10);
    }
}

$('#cv').click(function(e) {
    // get pixel under mouse cursor
    var data = ctx.getImageData(e.offsetX, e.offsetY, 1, 1).data;
    alert('rgb: ' + [].slice.call(data, 0, 3).join());
});