I have integrated a lot of the required functionality into the application but I was trying to make some sort of a color picker to allow the user select a color. At present I have a dropdown menu which is not very attractive on the UI.
I have created a color gradient from the following code:
var grad = colContext.createLinearGradient(20, 0, colCanvas.width - 20, 0); grad.addColorStop(0, "red"); grad.addColorStop(1 / 6, "orange"); grad.addColorStop(2 / 6, "yellow"); grad.addColorStop(3 / 6, "green"); grad.addColorStop(4 / 6, "aqua"); grad.addColorStop(5 / 6, "blue"); grad.addColorStop(1, "purple"); colContext.fillStyle = grad; colContext.fillRect(0,0, colCanvas.width, colCanvas.height);
I would like it if when the users mouse is over the gradient the color is displayed in another box and then they mousedown to accept the color. I just don't have any idea how I could achieve this!? Is there a way of retrieving the data from the pixel the cursor is over?
Thanks for any help!