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

User · Answer

Quick Answer  context getImageData x  y  1  1  data  returns an rgba array  e g   50  50  50  255     Here s a version of  lwburk s rgbToHex function that takes the rgba array as an argument   function rgbToHex rgb     return         rgb 0   lt  lt  16     rgb 1   lt  lt  8    rgb 2   toString 16

User · Answer

If you need to get the average color of a rectangular area  rather than the color of a single pixel  please take a look at this other question    JavaScript - Get average color from a certain area of an image  Anyway  both are done in a very similar way    Getting The Color Value of A Single Pixel from An Image or Canvas  To get the color of a single pixel  you would first draw that image to a canvas  which you have already done   const image   document getElementById  image    const canvas   document createElement  canvas    const context   canvas getContext  2d    const width   image width  const height   image height   canvas width   width  canvas height   height   context drawImage image  0  0  width  height     And then get the value of a single pixel like this   const data   context getImageData X  Y  1  1  data      RED     data 0     GREEN   data 1     BLUE    data 2     ALPHA   data 3     Speeding Thins Up by Getting all ImageData at Once  You need to use this same CanvasRenderingContext2D getImageData   to get the values of the whole image  which you do by changing its third and fourth params  The signature of that function is   ImageData ctx getImageData sx  sy  sw  sh      sx  The x coordinate of the upper left corner of the rectangle from which the ImageData will be extracted  sy  The y coordinate of the upper left corner of the rectangle from which the ImageData will be extracted  sw  The width of the rectangle from which the ImageData will be extracted  sh  The height of the rectangle from which the ImageData will be extracted    You can see it returns an ImageData object  whatever that is  The important part here is that that object has a  data property which contains all our pixel values   However  note that  data property is a 1-dimension Uint8ClampedArray  which means that all the pixel s components have been flattened  so you are getting something that looks like this   Let s say you have a 2x2 image like this    RED PIXEL         GREEN PIXEL BLUE PIXEL   TRANSPARENT PIXEL   Then  you will get them like this     255  0  0  255     0  255  0  255     0  0  255  255     0  0  0  0                RED PIXEL        GREEN PIXEL         BLUE PIXEL        TRANSPAERENT  PIXEL       1ST PIXEL          2ND PIXEL          3RD PIXEL                 4TH  PIXEL      As calling getImageData is a slow operation  you can call it only once to get the data of all the image  sw   image width  sh   image height    Then  in the example above  if you want to access the components of the TRANSPARENT PIXEL  that is  the one at position x   1  y   1 of this imaginary image  you would find its first index i in its ImageData s data property as    const i    y   imageData width   x    4      Let s See It in Action   x000D   x000D  const solidColor   document getElementById  solidColor    x000D  const alphaColor   document getElementById  alphaColor    x000D  const solidWeighted   document getElementById  solidWeighted    x000D   x000D  const solidColorCode   document getElementById  solidColorCode    x000D  const alphaColorCode   document getElementById  alphaColorCode    x000D  const solidWeightedCOde   document getElementById  solidWeightedCode    x000D   x000D  const brush   document getElementById  brush    x000D  const image   document getElementById  image    x000D  const canvas   document createElement  canvas    x000D  const context   canvas getContext  2d    x000D  const width   image width  x000D  const height   image height  x000D   x000D  const BRUSH SIZE   brush offsetWidth  x000D  const BRUSH CENTER   BRUSH SIZE   2  x000D  const MIN X   image offsetLeft   4  x000D  const MAX X   MIN X   width - 1  x000D  const MIN Y   image offsetTop   4  x000D  const MAX Y   MIN Y   height - 1  x000D   x000D  canvas width   width  x000D  canvas height   height  x000D   x000D  context drawImage image  0  0  width  height   x000D   x000D  const imageDataData   context getImageData 0  0  width  height  data  x000D   x000D  function sampleColor clientX  clientY    x000D    if  clientX  lt  MIN X    clientX  gt  MAX X    clientY  lt  MIN Y    clientY  gt  MAX Y    x000D      requestAnimationFrame      gt    x000D        brush style transform    translate    clientX  px     clientY  px    x000D        solidColorCode innerText   solidColor style background    rgb 0  0  0    x000D        alphaColorCode innerText   alphaColor style background    rgba 0  0  0  0 00    x000D        solidWeightedCode innerText   solidWeighted style background    rgb 0  0  0    x000D          x000D       x000D      return  x000D      x000D     x000D    const imageX   clientX - MIN X  x000D    const imageY   clientY - MIN Y  x000D     x000D    const i    imageY   width   imageX    4  x000D   x000D       A single pixel  R  G  B  A  will take 4 positions in the array  x000D    const R   imageDataData i   x000D    const G   imageDataData i   1   x000D    const B   imageDataData i   2   x000D    const A   imageDataData i   3    255  x000D    const iA   1 - A  x000D   x000D       Alpha-weighted color  x000D    const wR    R   A   255   iA    0  x000D    const wG    G   A   255   iA    0  x000D    const wB    B   A   255   iA    0  x000D   x000D       Update UI  x000D     x000D    requestAnimationFrame      gt    x000D      brush style transform    translate    clientX  px     clientY  px    x000D   x000D      solidColorCode innerText   solidColor style background x000D           rgb    R       G       B      x000D   x000D      alphaColorCode innerText   alphaColor style background x000D           rgba    R       G       B       A toFixed 2       x000D   x000D      solidWeightedCode innerText   solidWeighted style background x000D           rgb    wR       wG       wB      x000D        x000D    x000D   x000D  document onmousemove    e    gt  sampleColor e clientX  e clientY   x000D     x000D  sampleColor MIN X  MIN Y   x000D  body   x000D    margin  0  x000D    height  100vh  x000D    display  flex  x000D    flex-direction  row  x000D    align-items  center  x000D    justify-content  center  x000D    cursor  none  x000D    font-family  monospace  x000D    overflow  hidden  x000D    x000D   x000D   image   x000D    border  4px solid white  x000D    border-radius  2px  x000D    box-shadow  0 0 32px 0 rgba 0  0  0   25   x000D    width  150px  x000D    box-sizing  border-box  x000D    x000D   x000D   brush   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    pointer-events  none  x000D    width  1px  x000D    height  1px  x000D    mix-blend-mode  exclusion  x000D    border-radius  100   x000D    x000D   x000D   brush  before  x000D   brush  after   x000D    content      x000D    position  absolute  x000D    background  magenta  x000D    x000D   x000D   brush  before   x000D    top  -16px  x000D    left  0  x000D    height  33px  x000D    width  100   x000D    x000D   x000D   brush  after   x000D    left  -16px  x000D    top  0  x000D    width  33px  x000D    height  100   x000D    x000D   x000D   samples   x000D    position  relative  x000D    list-style  none  x000D    padding  0  x000D    width  250px  x000D    x000D   x000D   samples  before   x000D    content      x000D    position  absolute  x000D    top  0  x000D    left  27px  x000D    width  2px  x000D    height  100   x000D    background  black  x000D    border-radius  1px  x000D    x000D   x000D   samples  gt  li   x000D    position  relative  x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    padding-left  56px  x000D    x000D   x000D   samples  gt  li   li   x000D    margin-top  8px  x000D    x000D   x000D   sample   x000D    position  absolute  x000D    top  50   x000D    left  16px  x000D    transform  translate 0  -50    x000D    display  block  x000D    width  24px  x000D    height  24px  x000D    border-radius  100   x000D    box-shadow  0 0 16px 4px rgba 0  0  0   25     x000D    margin-right  8px  x000D    x000D   x000D   sampleLabel   x000D    font-weight  bold  x000D    margin-bottom  8px  x000D    x000D   x000D   sampleCode   x000D     x000D    x000D   lt img id  image  src  data image gif base64 R0lGODlhSwBLAPEAACMfIO0cJAAAAAAAACH C0ltYWdlTWFnaWNrDWdhbW1hPTAuNDU0NTUAIf4jUmVzaXplZCBvbiBodHRwczovL2V6Z2lmLmNvbS9yZXNpemUAIfkEBQAAAgAsAAAAAEsASwAAAv Uj6mb4A QY7TaKxvch MPKpC0eeUUptdomOzJqnLUvnFcl7J6Pzn9I l2IdfII8DZiCnYsYdK4qRTptAZwQKRVK71CusOgx2nFRrlhMu 33o2NEalC6S9zQvfi3Mlnm9WxeQ396F2 HcQsMjYGEBRVbhy5yOp6OgIeVIHpEnZyYCZ6cklKBJX Kgg2riqKoayOWl2 VrLmtDqBptIOjZ6K4qAeSrL8PcmHExsgMs2dpyIxPpKvdhM YxaTMW2PGr9GP76BN3VHTMurh7eoU14jsc P845Vn6OTb P I68iYOfwGv JOmRNHBfsV5ujA1LqM4eKDoNvXyDqItTxYX DC9irKBlIhkKGPtFw1JDiMeS7CqWqySPZcKGHH JHGgIpb6bCl1O0LmT57yCOqoI5UcU0YKjPXmFjMm0ZQ4NIVdGBdZRi9WrjLxJNMY1Yr4dYeuNxWApl1ALHb KDHrTV1owlriedJgSr4Cybu 9dFiWYAagsqAGVkkzaZTAuqD9ywKWMUG9dCO3u2zWpVzIhpW122utZlrHnTN Bq2Mqrlnqh8CQ 0Mrq3Kc  q7eo6dlB3rLuh3abPVbbbI2mxBdhWdsZhid8cr0oy9F08q0k5FXSadiyL1mF5z51a8VsQOp3 LlodkBfzmzWf2bOrtfzr48k 1hupDaLa9rUbO zlwndfaOCURAXRNaCBqBT2BncJakWfTzSYkmCEFr60RX0V8sKaHOltCBJ1tAAFYhHaVVbig3jxp0IBADs    gt  x000D   x000D   lt div id  brush  gt  lt  div gt  x000D   x000D   lt ul id  samples  gt  x000D     lt li gt  x000D       lt span class  sample  id  solidColor  gt  lt  span gt  x000D       lt div class  sampleLabel  gt solidColor lt  div gt  x000D       lt div class  sampleCode  id  solidColorCode  gt rgb 0  0  0  lt  div gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt span class  sample  id  alphaColor  gt  lt  span gt  x000D       lt div class  sampleLabel  gt alphaColor lt  div gt  x000D       lt div class  sampleCode  id  alphaColorCode  gt rgba 0  0  0  0 00  lt  div gt  x000D     lt  li gt  x000D     lt li gt  x000D       lt span class  sample  id  solidWeighted  gt  lt  span gt  x000D       lt div class  sampleLabel  gt solidWeighted  with white  lt  div gt  x000D       lt div class  sampleCode  id  solidWeightedCode  gt rgb 0  0  0  lt  div gt  x000D     lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D       Note I m using a small data URI to avoid Cross-Origin issues if I include an external image or an answer that is larger than allowed if I try to use a longer data URI     These colors look weird  don t they   If you move the cursor around the borders of the asterisk shape  you will see sometimes avgSolidColor is red  but the pixel you are sampling looks white  That s because even though the R component for that pixel might be high  the alpha channel is low  so the color is actually an almost transparent shade of red  but avgSolidColor ignores that   On the other hand  avgAlphaColor looks pink  Well  that s actually not true  it just looks pink because we are now using the alpha channel  which makes it semitransparent and allows us to see the background of the page  which in this case is white    Alpha-weighted color  Then  what can we do to fix this  Well  it turns out we just need to use the alpha channel and its inverse as the weights to calculate the components of our new sample  in this case merging it with white  as that s the color we use as background   That means that if a pixel is R  G  B  A  where A is in the interval  0  1   we will compute the inverse of the alpha channel  iA  and the components of the weighted sample as   const iA   1 - A  const wR    R   A   255   iA    0  const wG    G   A   255   iA    0  const wB    B   A   255   iA    0    Note how the more transparent a pixel is  A closer to 0   the lighter the color

User · Answer

I have a very simple working example of geting pixel color from canvas    First some basic HTML    lt canvas id  myCanvas  width  400  height  250  style  background red   onmouseover  echoColor event   gt   lt  canvas gt    Then JS to draw something on the Canvas  and to get color   var c   document getElementById  myCanvas    var ctx   c getContext  2d    ctx fillStyle    black   ctx fillRect 10  10  50  50    function echoColor e       var imgData   ctx getImageData e pageX  e pageX  1  1       red   imgData data 0       green   imgData data 1       blue   imgData data 2       alpha   imgData data 3       console log red         green         blue         alpha         Here is a working example  just look at the console

User · Answer

calling getImageData every time will slow the process     to speed up things i recommend store image data and then you can get pix value easily and quickly  so do something like this for better performance     keep it global let imgData   false      initially no image data we have     create some function block  if imgData     false           fetch once canvas data        var ctx   canvas getContext  2d      imgData   ctx getImageData 0  0  canvas width  canvas height            Prepare your X Y coordinates which you will be fetching from your mouse loc     let x   100            let y   100         locate index of current pixel     let index    y   imgData width   x    4           let red   imgData data index           let green   imgData data index 1           let blue   imgData data index 2           let alpha   imgData data index 3         Output    console log  pix x     x    y   y    index   index    COLOR   red     green     blue     alpha

User · Answer

Merging various references found here in StackOverflow  including the article above  and in other sites  I did so using javascript and JQuery    lt html gt   lt body gt   lt canvas id  myCanvas  width  400  height  400  style  border 1px solid  c3c3c3   gt  Your browser does not support the canvas element   lt  canvas gt   lt script src  jquery js  gt  lt  script gt   lt script type  text javascript  gt      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  gt  255    g  gt  255    b  gt  255          throw  Invalid color component       return   r  lt  lt  16     g  lt  lt  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        lt  script gt   lt img src  photo apple jpg   gt   lt  body gt   lt  html gt    This is my complete solution  Here I only used canvas and one image  but if you need to use  lt map gt  over the image  it s possible too

User · Answer

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     4 var 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

User · Answer

Here s a complete  self-contained example  First  use the following HTML   lt canvas id  quot example quot  width  quot 200 quot  height  quot 60 quot  gt  lt  canvas gt   lt div id  quot status quot  gt  lt  div gt   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    quot x  quot    x    quot   y  quot    y      var c   this getContext  2d        var p   c getImageData x  y  1  1  data       var hex    quot   quot      quot 000000 quot    rgbToHex p 0   p 1   p 2    slice -6           status   html coord    quot  lt br gt  quot    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  gt  255    g  gt  255    b  gt  255          throw  quot Invalid color component quot       return   r  lt  lt  16     g  lt  lt  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   x000D   x000D     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     lt br gt     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  gt  255    g  gt  255    b  gt  255          throw  Invalid color component       return   r  lt  lt  16     g  lt  lt  8    b  toString 16      function randomInt max      return Math floor Math random     max      function randomColor         return  rgb   randomInt 256      randomInt 256      randomInt 256       x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt canvas id  example  width  200  height  60  gt  lt  canvas gt   lt div id  status  gt  lt  div gt        x000D   x000D   x000D

User · Answer

You can try color-sampler  It s an easy way to pick color in a canvas  See demo

User · Answer

Wayne Burkett s answer is good  If you wanted to also extract the alpha value to get an rgba color  we could do this   var r   p 0   g   p 1   b   p 2   a   p 3    255  var rgba    rgb     r         g         b         a          I divided the alpha value by 255 because the ImageData object stores it as an integer between 0 - 255  but most applications  for example  CanvasRenderingContext2D fillRect    require colors to be in valid CSS format  where the alpha value is between 0 and 1    Also remember that if you extract a transparent color and then draw it back onto the canvas  it will overlay whatever color is there previously  So if you drew the color rgba 0 0 0 0 1  over the same spot 10 times  it would be black

[javascript] Get pixel color from canvas, on mousemove

Quick Answer

Examples related to javascript

Examples related to html

Examples related to jquery

Examples related to canvas

Examples related to getimagedata