How do I get a pixel value from a DrawingCanvas?

Hello, I have a DrawingCanvas instance which I use to let the player draw on it. I would like to manipulate the individual pixels of the DrawingCanvas instance through code. How do I access these pixels? getImagePixelData() seems to return something but I don't know how to access an individual pixel on it. In the documentation it says that it resolves an ImageData object but the data property doesn't exist when I try to access it. :/

Thanks in advance for any help, this is really important to me. :D

You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

DrawingCanvas.SnapshotRedAt(10,20)

DrawingCanvas.SnapshotGreenAt(10,20)

DrawingCanvas.SnapshotBlueAt(10,20)

DrawingCanvas.SnapshotAlphaAt(10,20)

You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

DrawingCanvas.SnapshotRedAt(10,20)

DrawingCanvas.SnapshotGreenAt(10,20)

DrawingCanvas.SnapshotBlueAt(10,20)

DrawingCanvas.SnapshotAlphaAt(10,20)

Thank you so much for the answer! :D

While this works just fine for a single pixel, when I try to access all pixels of the snapshot it takes some serious time. Is there any way to do it through code?

You need to execute "DrawingCanvas Save snapshot" action, wait for it to complete, and then you can read pixels with expressions, for example:

DrawingCanvas.SnapshotRedAt(10,20)

DrawingCanvas.SnapshotGreenAt(10,20)

DrawingCanvas.SnapshotBlueAt(10,20)

DrawingCanvas.SnapshotAlphaAt(10,20)

While this works just fine for a single pixel, when I try to access all pixels of the snapshot it takes some serious time. Is there any way to do it through code?

Yes, it's much faster with scripting, check out this demo:

dropbox.com/s/lv0j2ylolrcexv7/DrawingCanvasRewritePixelsJS.c3p

I am not a guru in JS, not sure if the script is correct, but it works.

Heeey thanks for the help! :D

I almost got it working but for some reason the playerPixels varaiable is giving me an array of zeros even when I draw on the Drawing canvas so I can't compare between the two DrawingCanvases.

Here's how I call the getImagePixelData() of the two DrawingCanvases:

	function load(playerImage, computerImage)
{
	playerImage.getImagePixelData().then(playerData=>loadComputerData (playerData,computerImage));
}

function loadComputerData (playerData, computerImage) {

	computerImage.getImagePixelData().then (computerData=>compare(playerData, computerData));
}

Try asking in the scripting forum:

construct.net/en/forum/construct-3/scripting-51

Try asking in the scripting forum:

https://www.construct.net/en/forum/construct-3/scripting-51

Apparently I was "painting" with black lines oin the DrawingCanvas so for some reason all values were zero (even the drawn ones), I changed color and now it works fine. :D