# BitmapData, Phase 3

**URL:** <https://phaser.discourse.group/t/bitmapdata-phase-3/1039>\
**Category:** Phaser 3\
**Created:** [February 1, 2019, 11:13am UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039 "2019-02-01T11:13:18Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ayman](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ayman/32/632_2.png) [@ayman](https://phaser.discourse.group/u/ayman)\
**Post date:** [February 1, 2019, 11:13am UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039/1 "2019-02-01T11:13:18Z")

</div>

```javascript
Hi, How I can make this code compatible with Phaser 3 :

   function createTile (WORD,COLOR) {

            var tile = this.game.add.bitmapData(this.tileWidth, this.tileHeight);

            tile.ctx.rect(5, 5, this.tileWidth - 5, this.tileHeight - 5);
            tile.ctx.fillStyle = COLOR;
            tile.ctx.fill();

            tile.ctx.font = '30px Arial';
            tile.ctx.textAlign = 'center';
            tile.ctx.textBaseline = 'middle';
            tile.ctx.fillStyle = '#fff';

            tile.ctx.fillText(WORD, this.tileWidth / 2, this.tileHeight / 2);

            return tile;

        }

Thanks
```

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [February 1, 2019, 11:49am UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039/2 "2019-02-01T11:49:26Z")

</div>

As far as I’ve heard, the closest Phaser 3 equivalent of Bitmap Data is the [Canvas Texture](https://photonstorm.github.io/phaser3-docs/Phaser.Textures.CanvasTexture.html). You can create one with the [addCanvas](https://photonstorm.github.io/phaser3-docs/Phaser.Textures.TextureManager.html#addCanvas) method of the Texture Manager (which is available as `this.textures` from a Scene).

I’ve never used Canvas Textures, but you should be able to replace `tile.ctx` with `tile.getContext()`, assuming you assign `tile` to your Canvas Texture. As far as I can tell, there’s no way to add the texture to the display list like you can with Bitmap Data, so you’ll probably have to use another Game Object to display it, such as an Image.

---

<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:** [February 1, 2019, 3:53pm UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039/3 "2019-02-01T15:53:36Z")

</div>

[textures/create canvas](https://labs.phaser.io/view.html?src=src/textures/create%20canvas.js)

---

<div class="post-metadata">

**Author:** ![ayman](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ayman/32/632_2.png) [@ayman](https://phaser.discourse.group/u/ayman)\
**Post date:** [February 1, 2019, 9:56pm UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039/4 "2019-02-01T21:56:44Z")

</div>

does not work with addCanvas I have this error : TextureManager.js: 171 Texture key already in use: text\_s

```
var text = this.scene.make.text({
        add: false,
        x: 0,
        y: 0,
        text: letter,
        style: {
            fontSize: '30px',
            fontFamily: 'Arial',
            color: color,
            align: 'center',
            backgroundColor: '#ff00ff'
        }
    });
    
        let tile = this.scene.textures.addCanvas('text_'+letter, text.canvas);
        tile.canvas.width = this.tileWidth
        tile.canvas.height = this.tileHeight
        tile.context.rect(5, 5, this.tileWidth - 5, this.tileHeight - 5);
        tile.context.fillStyle = color;
        if(color == '#ffffff'){
            tile.context.fillStyle = '#000000';
        }

```

I think of leaning towards Game Object to display it ?

---

<div class="post-metadata">

**Author:** ![Leis33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/leis33/32/6422_2.png) [@Leis33](https://phaser.discourse.group/u/Leis33)\
**Post date:** [April 15, 2022, 3:09pm UTC](https://phaser.discourse.group/t/bitmapdata-phase-3/1039/5 "2022-04-15T15:09:38Z")

</div>

You should use thix.textures.createCanvas(), rather than .addCanvas().