Saturday, April 13, 2024
 Popular · Latest · Hot · Upcoming
189
rated 0 times [  191] [ 2]  / answers: 1 / hits: 145000  / 15 Years ago, fri, march 20, 2009, 12:00:00

Is it possible to query a HTML Canvas object to get the color at a specific location?


More From » html

 Answers
25

There's a section about pixel manipulation in the W3C documentation.



Here's an example on how to invert an image:



var context = document.getElementById('myCanvas').getContext('2d');

// Get the CanvasPixelArray from the given coordinates and dimensions.
var imgd = context.getImageData(x, y, width, height);
var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}

// Draw the ImageData at the given (x,y) coordinates.
context.putImageData(imgd, x, y);

[#99815] Sunday, March 15, 2009, 15 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
kyrona

Total Points: 422
Total Questions: 111
Total Answers: 97

Location: Oman
Member since Wed, Apr 12, 2023
1 Year ago
;