I am trying to get the pixel RGBA data from a canvas for further processing. I think the canvas is actually a Unity game if that makes a difference.

I am trying to do this with the canvas of the game [Shakes and Fidget](https://w27.sfgame.net/?platform=webgl). I use the [readPixels](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels) method from the [context](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext).

This is what I tried:

```
var example = document.getElementById('#canvas');
var context = example.getContext('webgl2');      // Also doesn't work with: ', {preserveDrawingBuffer: true}'
var pixels = new Uint8Array(context.drawingBufferWidth * context.drawingBufferHeight * 4); 
context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels);

```

But all pixels are black apparently (which is not true obviously).

*Edit: Also, I want to read the pixels multiple times.
Thanks everyone for your answers. The answer provided by [@Kaiido](https://stackoverflow.com/users/3702797/kaiido) worked perfectly for me :)*