Add event listeners to pixels in HTML Canvas Element

Question

I have an HTML Canvas that's 500 x 500 pixels (250000 pixels total).

I'm using P5 javascript library to make some designs on the canvas.

I want to: 1) Attach an ID to each pixel 2) Every time a pixel changes, I want an event to pick up that gives me: the ID of the pixel, the previous color of the pixel, the new color of the pixel, and the timestamp of the change

I've looked through all HTML event listeners and haven't found one that will give me this information - is it possible?

I've got the context of the canvas and the image data before any of the drawing starts with:

// canvas instantiated as the canvas element
let context = canvas.getContext('2d')
let imgData = context.getImageData(0, 0, canvas.width, canvas.height)
let data = imgData.data

I think the way to interpret data from what I have so far is: it's a 250,000 element array in which each element contains the color of the pixel at that point in time. Next step is to add an event listener which fires every time one of these elements changes, but I can't figure out how to do that.

Thanks in advance

Answer 1

Best way to do this is to use a websocket that picks up x, y coordinates on mouse movements after an onMouseDown (or onTouchDown ) event on the canvas and streams the coordinates to the server