# Context problem

**URL:** <https://phaser.discourse.group/t/context-problem/1578>\
**Category:** Phaser 2 / CE\
**Created:** [March 7, 2019, 8:40am UTC](https://phaser.discourse.group/t/context-problem/1578 "2019-03-07T08:40:53Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 7, 2019, 8:40am UTC](https://phaser.discourse.group/t/context-problem/1578/1 "2019-03-07T08:40:53Z")

</div>

I have a huge image as background and I move by panning across the world. However, at some point I get an exception like:

> TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’  
> at Phaser.Sprite.PIXI.Sprite.\_renderCanvas (phaser.js:15712)  
> at Phaser.World.PIXI.DisplayObjectContainer.\_renderCanvas (phaser.js:15137)  
> at Phaser.Stage.PIXI.DisplayObjectContainer.\_renderCanvas (phaser.js:15137)  
> at PIXI.CanvasRenderer.renderDisplayObject (phaser.js:20531)  
> at PIXI.CanvasRenderer.render (phaser.js:20463)  
> at Phaser.Game.updateRender (phaser.js:36393)  
> at Phaser.Game.update (phaser.js:36314)  
> at Phaser.RequestAnimationFrame.updateRAF (phaser.js:61985)  
> at \_onLoop (phaser.js:61968)

I changed the lines with try-catch to see which sprites are affected. There are multiple sprites… the funny thing: It paints everything fine when I start the state. Then I pan… and pan… and pan… sometimes, at the first pan this error occurs, sometimes after 2 minnutes panning around as if you’ve nothing else to do.  
The previous state background is showing and then, after some seconds, it works again (because I catch the error, otherwise the whole game breaks).  
Why would the type of a loaded sprite change? That makes no sense… especially because it’s drawn when I start the state and I can be drawn even after the exception is thrown.

I’m running out of ideas. Can someone help?

---

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 7, 2019, 1:40pm UTC](https://phaser.discourse.group/t/context-problem/1578/2 "2019-03-07T13:40:25Z")

</div>

Nvm, got it. Duplicated sprites or whatever… clearing the cache between states fixed that like

```
game.state.start('anyState', true, false, ...yourParams);
```

---

<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:** [March 7, 2019, 4:03pm UTC](https://phaser.discourse.group/t/context-problem/1578/3 "2019-03-07T16:03:09Z")

</div>

Are you loading different textures with the same key?

---

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 7, 2019, 4:31pm UTC](https://phaser.discourse.group/t/context-problem/1578/4 "2019-03-07T16:31:59Z")

</div>

Not that I’m aware of…  
Each key is unique in my pack.json and I never call loadTexture somewhere.

---

<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:** [March 7, 2019, 8:36pm UTC](https://phaser.discourse.group/t/context-problem/1578/5 "2019-03-07T20:36:42Z")

</div>

> TypeError: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’: The provided value is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)’

Which line is this, and which sprites and textures are involved?

This can happen if `texture.baseTexture.source` becomes null, for one thing.

Are you using WEBGL\_MULTI?

---

<div class="post-metadata">

**Author:** ![Davaaron](https://avatars.discourse-cdn.com/v4/letter/d/ba9def/32.png) [@Davaaron](https://phaser.discourse.group/u/Davaaron)\
**Post date:** [March 8, 2019, 7:44am UTC](https://phaser.discourse.group/t/context-problem/1578/6 "2019-03-08T07:44:02Z")

</div>

It’s line 15711, the concrete function signature is

> PIXI.Sprite.prototype.\_renderCanvas = function(renderSession, matrix)

and the conrete line statement is

> renderSession.context.drawImage(this.tintedTexture, 0, 0, cw, ch, dx, dy, cw / resolution, ch / resolution);

I’m not using WEBGL\_MULTI I guess. I take canvas for all devices, except for iOS I take WebGL.

Better I check my pack.json and the loadings again. Maybe I messed it up there.

---

<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:** [March 8, 2019, 8:53pm UTC](https://phaser.discourse.group/t/context-problem/1578/7 "2019-03-08T20:53:41Z")

</div>

I guess it’s `this.tintedTexture` that’s empty then.