# What line of code creates the canvas?

**URL:** <https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536>\
**Category:** Phaser 3\
**Created:** [September 29, 2020, 12:30am UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536 "2020-09-29T00:30:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![3b33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/3b33/32/3334_2.png) [@3b33](https://phaser.discourse.group/u/3b33)\
**Post date:** [September 29, 2020, 12:30am UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/1 "2020-09-29T00:30:57Z")

</div>

I’m trying to learn how to use the [Game Scaling/Resizing Example (v3)](https://phaser.discourse.group/t/game-scaling-resizing-example-v3/1555) but I’m not sure how to apply it to my existing game. I currently have two canvas elements. The one that is resizing is empty and the one that has all my objects is below it.

I have a hunch new Phaser.Game(config) is it but I don’t know how to change the code so that it works with my existing game.

```
var game = new Phaser.Game(config);

game.scene.add('Boot', MyGame.Boot, true);
//code below belongs to resizing/scaling example. Code above is what I originally added to my game.
window.addEventListener('load', () => {
  const game = new Phaser.Game(config)....
```

---

<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 29, 2020, 1:10am UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/2 "2020-09-29T01:10:15Z")

</div>

Use only one `new Phaser.Game(config)`, where the example has it.

Put your scenes in the config like `scene: [MyGame.Boot, …]`.

---

<div class="post-metadata">

**Author:** ![3b33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/3b33/32/3334_2.png) [@3b33](https://phaser.discourse.group/u/3b33)\
**Post date:** [September 29, 2020, 6:53pm UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/3 "2020-09-29T18:53:25Z")

</div>

Okay thanks I did that but I’m using a function that reassigns colors in my spritesheet and I’m getting “game is not defined” on lines where ‘game’ is used in that function.

This is one of the drawbacks when you are using someone else’s code.

---

<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 29, 2020, 8:31pm UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/4 "2020-09-29T20:31:01Z")

</div>

> [@3b33](#):
>
> I’m using a function that reassigns colors in my spritesheet and I’m getting “game is not defined”

Show that code?

You can also do

```js
const game = new Phaser.Game(config)
window.game = game

```

if you want to match what you had before.

---

<div class="post-metadata">

**Author:** ![3b33](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/3b33/32/3334_2.png) [@3b33](https://phaser.discourse.group/u/3b33)\
**Post date:** [September 29, 2020, 8:57pm UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/5 "2020-09-29T20:57:24Z")

</div>

Okay that worked. I noticed you suggested that in the past after an internet search but I never thought of putting it inside that function.

I’m using the Palette Swapping example:

> **[Phaser - News - Palette Swapping Example: A source code example and...](https://phaser.io/news/2018/08/palette-swapping-example)**
>
> 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:** ![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 29, 2020, 9:28pm UTC](https://phaser.discourse.group/t/what-line-of-code-creates-the-canvas/7536/6 "2020-09-29T21:28:37Z")

</div>

You can usually reach the global managers (`anims`, `textures`) in other ways:

> <https://github.com/samme/phaser-3-palette-swapping-example/commit/69479e91393b10a3314bbaeaab79e35b738360b9>