# Get pixel of RenderTexture

**URL:** <https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442>\
**Category:** Phaser 3\
**Created:** [September 16, 2020, 10:34am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442 "2020-09-16T10:34:20Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 10:34am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/1 "2020-09-16T10:34:20Z")

</div>

I am doing scratch game and trying to detect percent of scratched area. I am using renderTexture to make scratch effect:

```
userCanvas = this.add.renderTexture(0, 0, 800, 600);

this.input.on('pointermove', function (pointer) {
if (pointer.isDown) {
  userCanvas.draw('brush', pointer.x - 32, pointer.y - 32);

  var pixel = userCanvas.texture.getPixel(100, 100);
  document.getElementById('color').textContent = "rgb(" + pixel.r + "," + pixel.g + "," + pixel.b + ")";
}}, this);

```

But there is not possible to get color of individual pixels. Its always return zero.  
I tried to saveTexture with some key, extract it and then get color - but result is the same.  
What I am doing wrong ?

Full example: [https://codepen.io/hoshinokoe/pen/MWyBzYb](https://codepen.io/hoshinokoe/pen/MWyBzYb)

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 10:46am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/2 "2020-09-16T10:46:37Z")

</div>

Texture has no getPIxel method. Use it on the canvas.

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 11:10am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/3 "2020-09-16T11:10:38Z")

</div>

Please provide code sample.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 12:00pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/4 "2020-09-16T12:00:18Z")

</div>

```
var rgb = userCanvas.context.getImageData(100, 100, 1, 1);
console.log(rgb.data);
```

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 12:17pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/5 "2020-09-16T12:17:44Z")

</div>

> [@Milton](#):
>
> `.context.getImageData(100, 100, 1, 1);`

It works only for game type = Phaser.CANVAS.  
if I set type = Phaser.AUTO then it using webgl rendering and returns always zero.  
How to get pixel in this case?

Example updated: [https://codepen.io/hoshinokoe/pen/MWyBzYb](https://codepen.io/hoshinokoe/pen/MWyBzYb)

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 12:27pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/6 "2020-09-16T12:27:01Z")

</div>

> **[Phaser - Examples - Snapshot Pixel](https://phaser.io/examples/v3/view/snapshot/snapshot-pixel)**
>
> Desktop and Mobile HTML5 game framework. A fast, free and fun open source framework for Canvas and WebGL powered browser games.

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 12:58pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/7 "2020-09-16T12:58:55Z")

</div>

Thanks for answer. It can get one pixel inside callback, but its not enough to detect scratched area.

```
this.game.renderer.snapshotPixel(pointer.x, pointer.y, function (pixel)
{
    g.clear();
    g.fillStyle(pixel.color);
    g.fillRect(0, 0, 128, 128);

});

```

There is another method to get area, but it also returns data inside callback.

```
this.game.renderer.snapshotArea(pointer.x, pointer.y, 128, 128, function (image) {
    document.body.appendChild(image);
    if (textureManager.exists('area'))
    {
        textureManager.remove('area');
    }
    textureManager.addImage('area', image);
    particles.setTexture('area');
});

```

And again, my goal is way to detect scratched area of existing renderTexture object. Idea was to get all pixels and check color. I don’t understand how to do that with folowing methods.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 1:13pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/8 "2020-09-16T13:13:35Z")

</div>

You are a moving target 🙂

> <https://stackoverflow.com/questions/8751020/how-to-get-a-pixels-x-y-coordinate-color-from-an-image>

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 1:46pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/9 "2020-09-16T13:46:50Z")

</div>

> [@Hoshinokoe](#):
>
> `this.game.renderer.snapshotArea(...)`

It returns final image of game, not only renderTexture. E.g. if game has background image, it will contains.  
So main question still open.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 1:48pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/10 "2020-09-16T13:48:57Z")

</div>

userCanvas.snapshotArea(…)

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 16, 2020, 1:52pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/11 "2020-09-16T13:52:26Z")

</div>

Tested. No, it returns global game image. I think renderer is global object.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 16, 2020, 2:36pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/12 "2020-09-16T14:36:34Z")

</div>

I think you have to use CanvasTexture for this. Or else make a snapshot, copy the image to a canvas and then get pixels.

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 3:10pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/13 "2020-09-16T15:10:09Z")

</div>

userCanvas.renderer.snapshotArea works fine for me.

Without ‘renderer’ it doesn’t, which is a bug I think…

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 16, 2020, 3:47pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/14 "2020-09-16T15:47:16Z")

</div>

I tested [RenderTexture#snapshot](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.RenderTexture.html#snapshot) and [RenderTexture#snapshotArea](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.RenderTexture.html#snapshot), both worked correctly.

The `renderer` methods **are** global, those are different.

![snapshot](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d0f61a0cb697c24a8b6a232c79b7d365028cd33b.png) ![snapshotArea](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/9/9cd1ed83f272de234c4d3ed9755214c7f7f84877.png)

---

<div class="post-metadata">

**Author:** ![Milton](https://avatars.discourse-cdn.com/v4/letter/m/87869e/32.png) [@Milton](https://phaser.discourse.group/u/Milton)\
**Post date:** [September 16, 2020, 4:02pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/15 "2020-09-16T16:02:10Z")

</div>

Strange. I tested on the OP’s [CodePen](https://codepen.io/hoshinokoe/pen/MWyBzYb?editors=0010). The global method works, the RenderTexture one doesn’t.  
If I look at the Phaser code, it shouldn’t make any difference? It just passes through, based on Canvas or WebGL…

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [September 16, 2020, 5:17pm UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/16 "2020-09-16T17:17:33Z")

</div>

In that pen, `userCanvas.snapshotArea(…)` does snapshot correctly, but I think `userCanvas.context.getImageData(…)` will always get a blank pixel in WEBGL mode.

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 17, 2020, 7:59am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/17 "2020-09-17T07:59:34Z")

</div>

`userCanvas.snapshotArea(…)`

It capture correctly, it was my mistake.

So full solution will be:

1. for canvas render just use getImageData() and check pixels
2. for webGl render

- get snapshot area
- save image to canvas
- getImageData() and check pixels

Thanks for help. if somebody knows more easier solution, I will appreciate.

---

<div class="post-metadata">

**Author:** ![Hoshinokoe](https://avatars.discourse-cdn.com/v4/letter/h/c0e974/32.png) [@Hoshinokoe](https://phaser.discourse.group/u/Hoshinokoe)\
**Post date:** [September 17, 2020, 9:01am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/18 "2020-09-17T09:01:03Z")

</div>

```
  var gl = userCanvas.gl.canvas.getContext('experimental-webgl');
  var pixels = new Uint8Array(1 * 1 * 4);
  gl.readPixels(100, 100, 1, 1, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

```

I found in sources of snapshot method how webGl gets all pixels. But it always return zeros. What is wrong ?

Demo updated: [https://codepen.io/hoshinokoe/pen/MWyBzYb](https://codepen.io/hoshinokoe/pen/MWyBzYb)

---

<div class="post-metadata">

**Author:** ![TomAtom](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/tomatom/32/226_2.png) [@TomAtom](https://phaser.discourse.group/u/TomAtom)\
**Post date:** [September 20, 2020, 6:10am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/19 "2020-09-20T06:10:21Z")

</div>

I think, your problem is described here: [https://stackoverflow.com/questions/7156971/webgl-readpixels-is-always-returning-0-0-0-0](https://stackoverflow.com/questions/7156971/webgl-readpixels-is-always-returning-0-0-0-0)

You get zeroes as drawing buffer got cleared.

---

<div class="post-metadata">

**Author:** ![drunkcat](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/drunkcat/32/4466_2.png) [@drunkcat](https://phaser.discourse.group/u/drunkcat)\
**Post date:** [August 26, 2022, 9:37am UTC](https://phaser.discourse.group/t/get-pixel-of-rendertexture/7442/20 "2022-08-26T09:37:29Z")

</div>

Did anybody manage to get the pixel data of **RenderTexture** with **snapshotPixel** method correctly?  
Other thing is, that although the **game.renderer.snapshotPixel** method correctly returns the color value of the pixel rom the game canvas image, the **alpha** value is max 1 for non-transparent pixel (should be 255), and **alphaGL** is max 0.00392156862745098 (should be 1).

Tested with Phaser 3.55.2

Greg.