Javascript colorbar is the best way to create it

Question

I have a list of colors ( created from values ) and you want to display them in colorbar (as a legend, which means each color). Something like that.

One way is a table with 1 column / n columns (n ​​= 25-100), each column represents one color. Is there a better way to do this?

Answer 1

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] + ')'); };