Get pixel color from canvas, on mousemove

Question

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far:

function draw() {       var ctx = document.getElementById('canvas').getContext('2d');       var img = new Image();       img.src = 'Your URL';        img.onload = function(){         ctx.drawImage(img,0,0);         };        canvas.onmousemove = function(e) {             var mouseX, mouseY;              if(e.offsetX) {                 mouseX = e.offsetX;                 mouseY = e.offsetY;             }             else if(e.layerX) {                 mouseX = e.layerX;                 mouseY = e.layerY;             }             var c = ctx.getImageData(mouseX, mouseY, 1, 1).data;                          $('#ttip').css({'left':mouseX+20, 'top':mouseY+20}).html(c[0]+'-'+c[1]+'-'+c[2]);       };     } 

Answer 1

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:

• https://bl.ocks.org/wayneburkett/ca41a5245a9f48766b7bc881448f9203

// set up some sample squares with random 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);  $('#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); });  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)})` }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <canvas id="example" width="200" height="60"></canvas> <div id="status"></div>