# CanvasTexture setPixel doesn't work

**URL:** <https://phaser.discourse.group/t/canvastexture-setpixel-doesnt-work/9396>\
**Category:** Phaser 3\
**Created:** [April 25, 2021, 12:34pm UTC](https://phaser.discourse.group/t/canvastexture-setpixel-doesnt-work/9396 "2021-04-25T12:34:37Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![andrew-m](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/andrew-m/32/2222_2.png) [@andrew-m](https://phaser.discourse.group/u/andrew-m)\
**Post date:** [April 25, 2021, 12:34pm UTC](https://phaser.discourse.group/t/canvastexture-setpixel-doesnt-work/9396/1 "2021-04-25T12:34:37Z")

</div>

I met a bug in Phaser 3:  
CanvasTexture’s setPixel(or getPixel) doesn’t work.

Here is the code:

```
'use strict';

var Scene = require('phaser').Scene;

class BootScene extends Scene{
    constructor(){
        super({ key: 'BootScene' });
    }
    preload(){
        
    }
    create(){
        var Sprite = require('phaser').GameObjects.Sprite;

        var __CT__ = this.textures.createCanvas('ct', 25, 25);
        for(let i = 0 ; i < 25 ; i++){
            for(let j = 0 ; j < 25 ; j++){
                console.log(` ~ SETTIN 255-128-64`);
                __CT__.setPixel(i, j, 255, 128, 64);
                let _pxl = __CT__.getPixel(i, j);
                console.log(` ~ GETTIN ${_pxl.r}-${_pxl.g}-${_pxl.b}`);
            }
        }
        __CT__.refresh();

        var s2 = new Sprite(this, 200, 200, 'ct');
        this.add.existing(s2);
        s2.setDisplaySize(200, 100);
    }
}

module.exports = BootScene;

```

Here what I see in Safari:  
[Screenshot - fa8b60d7663a7b16852490065f894923 - Gyazo](https://gyazo.com/fa8b60d7663a7b16852490065f894923) (nothing)

What I see in Brave:  
[Screenshot - 9be908c484b49bae75e0e242cdf0e2df - Gyazo](https://gyazo.com/9be908c484b49bae75e0e242cdf0e2df) (rectangle)

And in both browsers I see that getPixel returns nothing:

> **[Gyazo](https://gyazo.com/e8e8994a884a52c10e50eb70ba67e6a4)**

Is it planned to be fixed? Or what should I do now to avoid this bug?

versions:  
phaser: 3.52.0  
safari: 14.0.1 (16610.2.11.51.8)

---

<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:** [April 25, 2021, 1:32pm UTC](https://phaser.discourse.group/t/canvastexture-setpixel-doesnt-work/9396/2 "2021-04-25T13:32:34Z")

</div>

#### getPixel(x, y [, out])

Get the color of a specific pixel from this texture and store it in a Color object.

If you have drawn anything to this CanvasTexture since it was created you must call `CanvasTexture.update` to refresh the array buffer, otherwise this may return out of date color values, or worse - throw a run-time error as it tries to access an array element that doesn’t exist.

You also shouldn’t do 625 setPixel’s (625 times a getImageData and putImageData). That’s insanely expensive.  
Try something more like [this](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas):

```javascript
var invert = function() {
    ctx.drawImage(img, 0, 0);
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const data = imageData.data;
    for (var i = 0; i < data.length; i += 4) {
        data[i] = 255 - data[i]; // red
        data[i + 1] = 255 - data[i + 1]; // green
        data[i + 2] = 255 - data[i + 2]; // blue
    }
    ctx.putImageData(imageData, 0, 0);
};

```

Note: When running under WebGL the Canvas Texture needs to re-generate its base WebGLTexture and reupload it to the GPU every time you modify it, otherwise the changes you make to this texture will not be visible. To do this you should call `CanvasTexture.refresh()` once you are finished with your changes to the canvas. Try and keep this to a minimum, especially on large canvas sizes, or you may inadvertently thrash the GPU by constantly uploading texture data to it. This restriction does not apply if using the Canvas Renderer.