7

I have a list of colours (created from values) and want to display them in a colourbar (as a legend what each colour means). Something like this.

Example for a colour bar

One way would be a table with 1 row / n columns (n = 25-100), each column representing one colour. Is there any better way to do this?

Community
  • 1
  • 1
Horst Walter
  • 13,663
  • 32
  • 126
  • 228
  • Use an image, way better than tables. The position of the mouse pointer hover the image will determine wich color you're dealing with. – yoda Aug 28 '11 at 13:36
  • I would need to create the image dynamically. I have the colour table, which is dynamically created. – Horst Walter Aug 28 '11 at 13:57

1 Answers1

8

Canvas is a powerful API for this: http://jsfiddle.net/pimvdb/eGjak/89/.

var cv  = document.getElementById('cv'),
    ctx = cv.getContext('2d');

for(var i = 0; i <= 255; i++) { // fill strokes
    ctx.beginPath();

    var color = 'rgb(100, ' + i + ', ' + i + ')';
    ctx.fillStyle = color;

    ctx.fillRect(i * 2, 0, 2, 50);
}

cv.onclick = function(e) {
    var x = e.offsetX, // mouse x
        y = e.offsetY, // mouse y
        p = ctx.getImageData(x, y, 1, 1),
        x = p.data; // pixel at mouse (x, y) - contains [r, g, b, a]

    alert('Color: rgb(' + x[0] + ', ' + x[1] + ', ' + x[2] + ')');
};
pimvdb
  • 151,816
  • 78
  • 307
  • 352