Get pixel color from canvas, on mousemove
Here's a complete, self-contained example. First, use the following HTML:
<canvas id="example" width="200" height="60"></canvas><div id="status"></div>Then put some squares on the canvas with random background colors:
var example = document.getElementById('example');var context = example.getContext('2d');context.fillStyle = randomColor();context.fillRect(0, 0, 50, 50);context.fillStyle = randomColor();context.fillRect(55, 0, 50, 50);context.fillStyle = randomColor();context.fillRect(110, 0, 50, 50);And print each color on mouseover:
$('#example').mousemove(function(e) { var pos = findPos(this); var x = e.pageX - pos.x; var y = e.pageY - pos.y; var coord = "x=" + x + ", y=" + y; var c = this.getContext('2d'); var p = c.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); $('#status').html(coord + "<br>" + hex);});The code above assumes the presence of jQuery and the following utility functions:
function findPos(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { do { curleft += obj.offsetLeft; curtop += obj.offsetTop; } while (obj = obj.offsetParent); return { x: curleft, y: curtop }; } return undefined;}function rgbToHex(r, g, b) { if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16);}function randomInt(max) { return Math.floor(Math.random() * max);}function randomColor() { return `rgb(${randomInt(256)}, ${randomInt(256)}, ${randomInt(256)})`}See it in action here:
I know this is an old question, but here's an alternative. I'd store that image data in an array, then, on mouse move event over the canvas:
var index = (Math.floor(y) * canvasWidth + Math.floor(x)) * 4var r = data[index]var g = data[index + 1]var b = data[index + 2]var a = data[index + 3]A lot easier than getting the imageData everytime.
Merging various references found here in StackOverflow (including the article above) and in other sites, I did so using javascript and JQuery:
<html><body><canvas id="myCanvas" width="400" height="400" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script src="jquery.js"></script><script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); var img = new Image(); img.src = 'photo_apple.jpg'; context.drawImage(img, 0, 0); }; function findPos(obj){ var current_left = 0, current_top = 0; if (obj.offsetParent){ do{ current_left += obj.offsetLeft; current_top += obj.offsetTop; }while(obj = obj.offsetParent); return {x: current_left, y: current_top}; } return undefined; } function rgbToHex(r, g, b){ if (r > 255 || g > 255 || b > 255) throw "Invalid color component"; return ((r << 16) | (g << 8) | b).toString(16); }$('#myCanvas').click(function(e){ var position = findPos(this); var x = e.pageX - position.x; var y = e.pageY - position.y; var coordinate = "x=" + x + ", y=" + y; var canvas = this.getContext('2d'); var p = canvas.getImageData(x, y, 1, 1).data; var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); alert("HEX: " + hex);});</script><img src="photo_apple.jpg"/></body></html>This is my complete solution. Here I only used canvas and one image, but if you need to use <map> over the image, it's possible too.