1

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 - and when clicking showing all the different brightnesses for that selected color in it's own little 2D space.

I want to generate something that looks like this image using canvas:

Color picker

My attempt for this:

Javascript:

function ColorPicker(element) {
    this.element = element;

    this.init = function() {
        var diameter = this.element.offsetWidth;

        var canvas = document.createElement('canvas');
        canvas.height = diameter;
        canvas.width = diameter,
        this.canvas = canvas;

        this.renderColorMap();

        element.appendChild(canvas);

        this.setupBindings();
    };

    this.renderColorMap = function() {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');

        var radius = canvas.width / 2;
        var toRad = (2 * Math.PI) / 360;
        var step = 1 / radius;

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

        for(var i = 0; i < 360; i += step) {
            var rad = i * toRad;
            ctx.strokeStyle = 'hsl(' + i + ', 100%, 50%)';
            ctx.beginPath();
            ctx.moveTo(radius, radius);
            ctx.lineTo(radius + radius * Math.cos(rad), radius + radius * Math.sin(rad));
            ctx.stroke();
        }

        ctx.fillStyle = 'rgb(255, 255, 255)';
        ctx.beginPath();
        ctx.arc(radius, radius, radius * 0.8, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();

        // render the rainbow box here ----------
    };

    this.renderMouseCircle = function(x, y) {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'rgb(255, 255, 255)';
        ctx.lineWidth = '2';
        ctx.beginPath();
        ctx.arc(x, y, 10, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.stroke();
    };

    this.setupBindings = function() {
        var canvas = this.canvas;
        var ctx = canvas.getContext('2d');
        var self = this;

        canvas.addEventListener('click', function(e) {
            var x = e.offsetX || e.clientX - this.offsetLeft;
            var y = e.offsetY || e.clientY - this.offsetTop;

            var imgData = ctx.getImageData(x, y, 1, 1).data;
            var selectedColor = new Color(imgData[0], imgData[1], imgData[2]);
            // generate this square here.

            self.renderMouseCircle(x, y);
        }, false);
    };

    this.init();
}

new ColorPicker(document.querySelector('.color-space'));

JSFiddle: http://jsfiddle.net/yH6JE/

I have a hard time figuring out how to generate this square in the middle. Basically I want the color in the far left middle to be the same as the one on the ring - that I've selected by clicking.

How can I generate this type of gradient square?

3
  • 1
    I would suggest changing your square from the layout you're currently using to the layout Google Chrome's inspector uses, which looks like i.imgur.com/qTMpBqt.png. Would that be okay for you too? If you want I can post the code you'd need to do that as an answer.
    – Joeytje50
    Jan 5, 2014 at 17:57
  • Oh yes - that would be perfectly fine. Especially if this would generate a more clean, simple and readable code
    – Yonder
    Jan 5, 2014 at 22:29
  • Here is the script. It uses the more conventional color picker layout.
    – Joeytje50
    Jan 5, 2014 at 22:49

2 Answers 2

4

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:

function draw(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

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.