Originally here: https://stackoverflow.com/questions/6735470/get-pixel-color-from-canvas-on-mouseover
Refresh to get new colors.
Last active
June 27, 2020 05:44
-
-
Save wayneburkett/ca41a5245a9f48766b7bc881448f9203 to your computer and use it in GitHub Desktop.
Get pixel color from canvas on mouseover
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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)})` | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="example" width="200" height="60"></canvas> | |
| <div id="status"></div> | |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> | |
| <script src="color.js" type="text/javascript"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment