# How to make snapshot from another canvas

**URL:** <https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794>\
**Category:** Phaser 3\
**Created:** [January 20, 2023, 10:47pm UTC](https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794 "2023-01-20T22:47:23Z")\
**Posts on this page:** 4\
**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:** [January 20, 2023, 10:47pm UTC](https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794/1 "2023-01-20T22:47:23Z")

</div>

There are 2 canvases on page:

1. with Phaser game attached
2. another controlled by external scripts

I need to capture image from second canvas and put as sprite in first one.

This code perfectly works with Phaser 2.6

```javascript
this.sprite.loadTexture(PIXI.Texture.fromCanvas(secondCanvasEl, PIXI.scaleModes.DEFAULT));
            

```

Any suggestions how to do that with Phaser v3.55 ?

---

<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:** [January 21, 2023, 3:42pm UTC](https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794/2 "2023-01-21T15:42:29Z")

</div>

```javascript
const canvasTexture = this.textures.addCanvas('secondCanvas', secondCanvasEl);

this.add.image(x, y, canvasTexture);

```

---

<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:** [January 21, 2023, 5:37pm UTC](https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794/3 "2023-01-21T17:37:30Z")

</div>

@samme It will fails if second canvas using webgl. CanvasTexture doesn’t support:

```javascript
CanvasTexture (manager, key, source, width, height)
...
this.context = this.canvas.getContext('2d');

```

How to grab image from webgl canvas ?

---

<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:** [January 21, 2023, 6:53pm UTC](https://phaser.discourse.group/t/how-to-make-snapshot-from-another-canvas/12794/4 "2023-01-21T18:53:24Z")

</div>

```javascript
Phaser.Renderer.Snapshot.WebGL(secondCanvasEl, {
  callback: (image) => {
      this.textures.addImage('secondCanvas', image);

      this.add.image(x, y, 'secondCanvas');
  },
});

```