@vpmedia/phaser 1.114.0 → 1.115.0

package/src/phaser/core/signal_binding.ts

@@ -5,7 +5,7 @@ export class SignalBinding {
   public _args: any;
   public _priority: number;
   public _isOnce: boolean;
-  public context: any;
+  public context: unknown;
   public callCount: number;
   public active: boolean;
   public params: any;
@@ -23,7 +23,7 @@ export class SignalBinding {
     signal: Signal,
     listener: Function,
     isOnce = false,
-    listenerContext: any | null = null,
+    listenerContext: unknown | null = null,
     priority = 0,
     args: any = null
   ) {

package/src/phaser/core/sound.ts

@@ -9,7 +9,7 @@ export class Sound {
   public key!: string;
   public loop!: boolean;
   public markers!: any;
-  public context!: AudioContext;
+  public context!: AudioContext | null;
   public autoplay!: boolean;
   public totalDuration!: number;
   public startTime!: number;
@@ -91,7 +91,7 @@ export class Sound {
     this.context = this.game.sound.context;
     this.masterGainNode = this.game.sound.masterGain;
     const gainNode: GainNode =
-      this.context.createGain === undefined ? (this.context as any).createGainNode() : this.context.createGain();
+      this.context!.createGain === undefined ? (this.context as any).createGainNode() : this.context!.createGain();
     this.gainNode = gainNode;
     gainNode.gain.value = volume * this.game.sound.volume;
     if (connect && this.masterGainNode) {
@@ -317,7 +317,7 @@ export class Sound {
     }
     //  Does the sound need decoding?
     if (this.game.cache.isSoundDecoded(this.key)) {
-      this._sound = this.context.createBufferSource();
+      this._sound = this.context!.createBufferSource();
       if (this.externalNode) {
         this._sound.connect(this.externalNode);
       } else {
@@ -389,7 +389,7 @@ export class Sound {
   public resume() {
     if (this.paused && this._sound) {
       const p = Math.max(0, this.position + this.pausedPosition / 1000);
-      this._sound = this.context.createBufferSource();
+      this._sound = this.context!.createBufferSource();
       this._sound.buffer = this._buffer;
       if (this.externalNode) {
         this._sound.connect(this.externalNode);

package/src/phaser/core/sound_manager.ts

@@ -13,9 +13,9 @@ import { Sound } from './sound.js';
 import { SoundSprite } from './sound_sprite.js';
 
 export class SoundManager {
-  public game!: any;
+  public game!: Game;
   public onChange!: any;
-  public context!: any;
+  public context!: AudioContext | null;
   public baseLatency!: any;
   public noAudio!: any;
   public type!: any;
@@ -102,7 +102,7 @@ export class SoundManager {
     }
     this.baseLatency = this.context.baseLatency ?? 256 / (this.context.sampleRate ?? 44_100);
     if (this.context.createGain === undefined) {
-      this.masterGain = this.context.createGainNode();
+      this.masterGain = (this.context as unknown as { createGainNode: () => GainNode }).createGainNode();
     } else {
       this.masterGain = this.context.createGain();
     }
@@ -131,7 +131,7 @@ export class SoundManager {
    */
   public onContextStateChange = () => {
     this.game.logger.info('onContextStateChange', {
-      state: this.context.state,
+      state: this.context!.state,
       isLocked: this.isLocked,
     });
     this.checkUnlockHandlers();
@@ -142,12 +142,12 @@ export class SoundManager {
    */
   public checkUnlockHandlers = () => {
     this.game.logger.info('checkUnlockHandlers', {
-      state: this.context.state,
+      state: this.context!.state,
       isLocked: this.isLocked,
     });
-    if (!this.isLocked && (this.context.state === 'suspended' || this.context.state === 'interrupted')) {
+    if (!this.isLocked && (this.context!.state === 'suspended' || this.context!.state === 'interrupted')) {
       this.addUnlockHandlers();
-    } else if (this.isLocked && this.context.state === 'running') {
+    } else if (this.isLocked && this.context!.state === 'running') {
       this.removeUnlockHandlers();
     }
   };
@@ -158,7 +158,7 @@ export class SoundManager {
   public addUnlockHandlers = () => {
     this.isLocked = true;
     this.game.logger.info('addUnlockHandlers', {
-      state: this.context.state,
+      state: this.context!.state,
       isLocked: this.isLocked,
     });
     for (const eventType of ['touchend', 'click', 'keydown']) {
@@ -172,7 +172,7 @@ export class SoundManager {
   public removeUnlockHandlers = () => {
     this.isLocked = false;
     this.game.logger.info('removeUnlockHandlers', {
-      state: this.context.state,
+      state: this.context!.state,
       isLocked: this.isLocked,
     });
     for (const eventType of ['touchend', 'click', 'keydown']) {
@@ -185,7 +185,7 @@ export class SoundManager {
    * @param {Event} event - The DOM event that triggered the unlock.
    */
   public onUnlockEvent = (event: Event) => {
-    const initialState = this.context.state;
+    const initialState = this.context!.state;
     if (initialState !== 'suspended' && initialState !== 'interrupted') {
       this.game.logger.info('onUnlockResumeDenied', {
         state: initialState,
@@ -200,12 +200,11 @@ export class SoundManager {
       isLocked: this.isLocked,
       event,
     });
-    this.context
-      .resume()
+    this.context!.resume()
       .then(() => {
         this.game.logger.info('onContextResumeResult', {
           initialState,
-          state: this.context.state,
+          state: this.context!.state,
           isLocked: this.isLocked,
         });
         this.removeUnlockHandlers();
@@ -213,14 +212,14 @@ export class SoundManager {
       .catch((error: unknown) => {
         this.game.logger.info('onContextResumeReject', {
           initialState,
-          state: this.context.state,
+          state: this.context!.state,
           isLocked: this.isLocked,
           error,
         });
         this.removeUnlockHandlers();
         this.game.logger.fatal('SoundManager', {
           error,
-          tags: { 'audio.initialState': initialState, 'audio.state': this.context.state },
+          tags: { 'audio.initialState': initialState, 'audio.state': this.context!.state },
         });
       });
   };
@@ -280,8 +279,7 @@ export class SoundManager {
       return;
     }
     this.game.cache.updateSound(key, 'isDecoding', true);
-    this.context
-      .decodeAudioData(soundData)
+    this.context!.decodeAudioData(soundData)
       .then((buffer: AudioBuffer) => {
         this.game.cache.decodedSound(key, buffer);
       })
@@ -304,7 +302,7 @@ export class SoundManager {
    * @param {Function} callback - The callback function to call when all files are decoded.
    * @param {object} callbackContext - The context in which to call the callback.
    */
-  public setDecodedCallback(files: any, callback: Function, callbackContext: any) {
+  public setDecodedCallback(files: any, callback: Function, callbackContext: unknown) {
     if (typeof files === 'string') {
       files = [files];
     }
@@ -473,7 +471,7 @@ export class SoundManager {
     this._sounds = [];
     this.onChange.dispose();
     if (this.context?.close) {
-      this.context.close();
+      void this.context.close();
     }
   }
 

package/src/phaser/core/sound_sprite.ts

@@ -1,6 +1,6 @@
 import type { Game } from './game.js';
 export class SoundSprite {
-  public game!: any;
+  public game!: Game;
   public key!: any;
   public config!: any;
   public autoplayKey!: any;
@@ -22,7 +22,7 @@ export class SoundSprite {
     for (const k in this.config.spritemap) {
       const marker = this.config.spritemap[k];
       const sound = this.game.sound.add(this.key);
-      sound.addMarker(k, marker.start, marker.end - marker.start, null, marker.loop);
+      sound.addMarker(k, marker.start, marker.end - marker.start, undefined, marker.loop);
       this.sounds[k] = sound;
     }
     if (this.config.autoplay) {

package/src/phaser/core/timer.ts

@@ -66,7 +66,7 @@ export class Timer {
     loop: boolean,
     repeatCount: number,
     callback: Function,
-    callbackContext: any | null = null,
+    callbackContext: unknown | null = null,
     args: any = []
   ) {
     const roundedDelay = Math.round(delay);
@@ -91,7 +91,7 @@ export class Timer {
    * @param {...any} args - Arguments to pass to the callback function.
    * @returns {TimerEvent} The created TimerEvent.
    */
-  public add(delay: number, callback: Function, callbackContext: any | null = null, ...args: any[]) {
+  public add(delay: number, callback: Function, callbackContext: unknown | null = null, ...args: unknown[]) {
     return this.create(delay, false, 0, callback, callbackContext, args);
   }
 
@@ -102,7 +102,7 @@ export class Timer {
    * @param {...T} args - Arguments to pass to the resolve function.
    * @returns {Promise<T | T[]>} The created Promise.
    */
-  public wait(delay: number, ...args: any[]) {
+  public wait(delay: number, ...args: unknown[]) {
     return new Promise((resolve) => {
       this.create(delay, false, 0, () => {
         resolve(args.length <= 1 ? args[0] : args);
@@ -123,8 +123,8 @@ export class Timer {
     delay: number,
     repeatCount: number,
     callback: Function,
-    callbackContext: any | null = null,
-    ...args: any[]
+    callbackContext: unknown | null = null,
+    ...args: unknown[]
   ) {
     return this.create(delay, false, repeatCount, callback, callbackContext, args);
   }
@@ -137,7 +137,7 @@ export class Timer {
    * @param {...any} args - Arguments to pass to the callback function.
    * @returns {TimerEvent} The created TimerEvent.
    */
-  public loop(delay: number, callback: Function, callbackContext: any | null = null, ...args: any[]) {
+  public loop(delay: number, callback: Function, callbackContext: unknown | null = null, ...args: unknown[]) {
     return this.create(delay, true, 0, callback, callbackContext, args);
   }
 

package/src/phaser/core/timer_event.ts

@@ -7,7 +7,7 @@ export class TimerEvent {
   public repeatCount: number;
   public loop: boolean;
   public callback: Function;
-  public callbackContext: object;
+  public callbackContext: unknown;
   public args: unknown[];
   public pendingDelete: boolean;
 
@@ -18,7 +18,7 @@ export class TimerEvent {
     repeatCount: number,
     loop: boolean,
     callback: Function,
-    callbackContext: object,
+    callbackContext: unknown,
     args: unknown[]
   ) {
     this.timer = timer;

package/src/phaser/core/tween.ts

@@ -26,7 +26,7 @@ export class Tween {
   public chainedTween!: Tween | null;
   public isPaused!: boolean;
   public _onUpdateCallback!: Function | null;
-  public _onUpdateCallbackContext!: object | null;
+  public _onUpdateCallbackContext!: unknown;
   public _pausedTime!: number;
   public _codePaused!: boolean;
   public _hasStarted!: boolean;
@@ -296,7 +296,7 @@ export class Tween {
    * @param {number} index - The index in the timeline to apply interpolation to.
    * @returns {Tween} This Tween object for chaining.
    */
-  public interpolation(interpolation: Function, context: any = MathUtils, index = 0) {
+  public interpolation(interpolation: Function, context: unknown = MathUtils, index = 0) {
     this.updateTweenData('interpolationFunction', interpolation, index);
     return this.updateTweenData('interpolationContext', context, index);
   }
@@ -316,14 +316,14 @@ export class Tween {
    * @param {...any} args - The tweens to chain.
    * @returns {Tween} This Tween object for chaining.
    */
-  public chain(...args: any[]) {
+  public chain(...args: Tween[]) {
     let i = args.length;
     while (i) {
       i -= 1;
       if (i > 0) {
-        args[i - 1].chainedTween = args[i];
+        args[i - 1]!.chainedTween = args[i] ?? null;
       } else {
-        this.chainedTween = args[i];
+        this.chainedTween = args[i] ?? null;
       }
     }
     return this;
@@ -345,7 +345,7 @@ export class Tween {
    * @param {object} callbackContext - The context in which to call the callback.
    * @returns {Tween} This Tween object for chaining.
    */
-  public onUpdateCallback(callback: Function, callbackContext: any) {
+  public onUpdateCallback(callback: Function, callbackContext: unknown) {
     this._onUpdateCallback = callback;
     this._onUpdateCallbackContext = callbackContext;
     return this;

package/src/phaser/core/tween_data.ts

@@ -1,10 +1,11 @@
+import type { Game } from './game.js';
 import * as MathUtils from '../util/math.js';
 import { TWEEN_COMPLETE, TWEEN_LOOPED, TWEEN_PENDING, TWEEN_RUNNING } from './const.js';
 import type { Tween } from './tween.js';
 
 export class TweenData {
   public parent!: any;
-  public game!: any;
+  public game!: Game;
   public vStart!: any;
   public vStartCache!: any;
   public vEnd!: any;

package/src/phaser/core/tween_manager.ts

@@ -36,7 +36,7 @@ import {
 } from './tween_easing.js';
 
 export class TweenManager {
-  public game!: any;
+  public game!: Game;
   public _tweens!: any;
   public _add!: any;
   public easeMap!: any;

package/src/phaser/display/button.ts

@@ -46,7 +46,7 @@ export class Button extends Image {
     y = 0,
     key: string | null = null,
     callback: Function | null = null,
-    callbackContext: any | null = null,
+    callbackContext: unknown | null = null,
     overFrame: string | null = null,
     outFrame: string | null = null,
     downFrame: string | null = null,

package/src/phaser/display/canvas/buffer.ts

@@ -1,10 +1,10 @@
 import { create, removeByCanvas } from './pool.js';
 
 export class CanvasBuffer {
-  public width!: any;
-  public height!: any;
+  public width!: number;
+  public height!: number;
   public canvas!: any;
-  public context!: any;
+  public context!: CanvasRenderingContext2D;
   /**
    * Creates a new CanvasBuffer instance.
    * @param {number} width - The width of the canvas buffer.

package/src/phaser/display/canvas/graphics.ts

@@ -1,5 +1,9 @@
-import { GEOM_CIRCLE, GEOM_ELLIPSE, GEOM_POLYGON, GEOM_RECTANGLE, GEOM_ROUNDED_RECTANGLE } from '../../core/const.js';
 import type { Graphics } from '../graphics.js';
+import { Circle } from '../../geom/circle.js';
+import { Ellipse } from '../../geom/ellipse.js';
+import { Polygon } from '../../geom/polygon.js';
+import { Rectangle } from '../../geom/rectangle.js';
+import { RoundedRectangle } from '../../geom/rounded_rectangle.js';
 
 /**
  * Renders a graphics object to canvas.
@@ -13,7 +17,7 @@ export const updateGraphicsTint = (graphics: Graphics) => {
   const tintG = ((graphics.tint >> 8) & 0xff) / 255;
   const tintB = (graphics.tint & 0xff) / 255;
   for (const data of graphics.graphicsData) {
-    const fillColor = Math.trunc(data.fillColor);
+    const fillColor = Math.trunc(data.fillColor ?? 0);
     const lineColor = Math.trunc(data.lineColor);
     data._fillTint =
       (((((fillColor >> 16) & 0xff) / 255) * tintR * 255) << 16) +
@@ -31,7 +35,7 @@ export const updateGraphicsTint = (graphics: Graphics) => {
  * @param {Graphics} graphics - The graphics object to render.
  * @param {object} context - The canvas rendering context.
  */
-export const renderGraphics = (graphics: Graphics, context: any) => {
+export const renderGraphics = (graphics: Graphics, context: CanvasRenderingContext2D) => {
   const { worldAlpha } = graphics;
   if (graphics.dirty) {
     updateGraphicsTint(graphics);
@@ -42,7 +46,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
     const fillColor = data._fillTint;
     const lineColor = data._lineTint;
     context.lineWidth = data.lineWidth;
-    if (data.type === GEOM_POLYGON) {
+    if (shape instanceof Polygon) {
       context.beginPath();
       const { points } = shape;
       context.moveTo(points[0], points[1]);
@@ -58,7 +62,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
       }
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
@@ -66,10 +70,10 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
         context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
-    } else if (data.type === GEOM_RECTANGLE) {
+    } else if (shape instanceof Rectangle) {
       if (data.fillColor || data.fillColor === 0) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fillRect(shape.x, shape.y, shape.width, shape.height);
       }
       if (data.lineWidth) {
@@ -77,13 +81,13 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
         context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.strokeRect(shape.x, shape.y, shape.width, shape.height);
       }
-    } else if (data.type === GEOM_CIRCLE) {
+    } else if (shape instanceof Circle) {
       context.beginPath();
       context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
@@ -91,7 +95,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
         context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
-    } else if (data.type === GEOM_ELLIPSE) {
+    } else if (shape instanceof Ellipse) {
       // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
       const w = shape.width * 2;
       const h = shape.height * 2;
@@ -113,7 +117,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
       context.closePath();
       if (data.fill) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
@@ -121,7 +125,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
         context.strokeStyle = `#${`00000${Math.trunc(lineColor).toString(16)}`.slice(-6)}`;
         context.stroke();
       }
-    } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
+    } else if (shape instanceof RoundedRectangle) {
       const rx = shape.x;
       const ry = shape.y;
       const { width } = shape;
@@ -142,7 +146,7 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
       context.closePath();
       if (data.fillColor || data.fillColor === 0) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
-        context.fillStyle = `#${`00000${Math.trunc(fillColor).toString(16)}`.slice(-6)}`;
+        context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fill();
       }
       if (data.lineWidth) {
@@ -159,16 +163,16 @@ export const renderGraphics = (graphics: Graphics, context: any) => {
  * @param {Graphics} graphics - The graphics object to render.
  * @param {object} context - The canvas rendering context.
  */
-export const renderGraphicsMask = (graphics: Graphics, context: any) => {
+export const renderGraphicsMask = (graphics: Graphics, context: CanvasRenderingContext2D) => {
   const len = graphics.graphicsData.length;
   if (len === 0) {
     return;
   }
   context.beginPath();
   for (let i = 0; i < len; i += 1) {
-    const data = graphics.graphicsData[i];
+    const data = graphics.graphicsData[i]!;
     const { shape } = data;
-    if (data.type === GEOM_POLYGON) {
+    if (shape instanceof Polygon) {
       const { points } = shape;
       context.moveTo(points[0], points[1]);
       for (let j = 1; j < points.length / 2; j += 1) {
@@ -178,13 +182,13 @@ export const renderGraphicsMask = (graphics: Graphics, context: any) => {
       if (points[0] === points.at(-2) && points[1] === points.at(-1)) {
         context.closePath();
       }
-    } else if (data.type === GEOM_RECTANGLE) {
+    } else if (shape instanceof Rectangle) {
       context.rect(shape.x, shape.y, shape.width, shape.height);
       context.closePath();
-    } else if (data.type === GEOM_CIRCLE) {
+    } else if (shape instanceof Circle) {
       context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
       context.closePath();
-    } else if (data.type === GEOM_ELLIPSE) {
+    } else if (shape instanceof Ellipse) {
       // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas
       const w = shape.width * 2;
       const h = shape.height * 2;
@@ -203,7 +207,7 @@ export const renderGraphicsMask = (graphics: Graphics, context: any) => {
       context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
       context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
       context.closePath();
-    } else if (data.type === GEOM_ROUNDED_RECTANGLE) {
+    } else if (shape instanceof RoundedRectangle) {
       const rx = shape.x;
       const ry = shape.y;
       const { width } = shape;

package/src/phaser/display/canvas/masker.ts

@@ -1,11 +1,13 @@
 import { renderGraphicsMask } from './graphics.js';
+import type { RenderSession } from '../render_session.js';
+import type { Graphics } from '../graphics.js';
 
 /**
  * Pushes a mask onto the rendering stack.
  * @param {object} maskData - The mask data to apply.
  * @param {object} renderSession - The rendering session object.
  */
-export const pushMask = (maskData: any, renderSession: any) => {
+export const pushMask = (maskData: any, renderSession: RenderSession) => {
   const { context } = renderSession;
   context.save();
   const cacheAlpha = maskData.alpha;
@@ -26,8 +28,9 @@ export const pushMask = (maskData: any, renderSession: any) => {
 
 /**
  * Pops a mask from the rendering stack.
+ * @param {object} _maskData - Unused; the canvas path restores whatever was saved.
  * @param {object} renderSession - The rendering session object.
  */
-export const popMask = (renderSession: any) => {
+export const popMask = (_maskData: Graphics | null, renderSession: RenderSession) => {
   renderSession.context.restore();
 };

package/src/phaser/display/canvas/renderer.ts

@@ -25,22 +25,23 @@ import {
 import { ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT } from '../../core/error_code.js';
 import * as CanvasMaskManager from './masker.js';
 import { detectCapabilities } from './tinter.js';
-import { getSmoothingPrefix } from './util.js';
+import { getSmoothingPrefix, setSmoothing } from './util.js';
+import type { RenderSession } from '../render_session.js';
 
 export class CanvasRenderer {
   public type!: any;
-  public resolution!: any;
+  public resolution!: number;
   public clearBeforeRender!: any;
   public transparent!: any;
   public autoResize!: any;
   public contextLost!: any;
-  public width!: any;
-  public height!: any;
+  public width!: number;
+  public height!: number;
   public view!: any;
-  public context!: any;
+  public context!: CanvasRenderingContext2D;
   public refresh!: any;
   public count!: any;
-  public renderSession!: any;
+  public renderSession!: RenderSession;
   /**
    * Creates a new CanvasRenderer instance.
    * @param {Game} _game - The game instance.
@@ -64,13 +65,14 @@ export class CanvasRenderer {
     }
     this.refresh = true;
     this.count = 0;
+    // Only the canvas half of the session applies to this renderer.
     this.renderSession = {
       context: this.context,
       maskManager: CanvasMaskManager,
       scaleMode: game.config.antialias ? SCALE_LINEAR : SCALE_NEAREST,
       smoothProperty: getSmoothingPrefix(this.context),
       roundPixels: game.config.roundPixels,
-    };
+    } as RenderSession;
     this.mapBlendModes();
     this.resize(this.width, this.height);
   }
@@ -108,9 +110,6 @@ export class CanvasRenderer {
     if (removeView && this.view.parent) {
       this.view.parent.removeChild(this.view);
     }
-    this.view = null;
-    this.context = null;
-    this.renderSession = null;
   }
 
   /**
@@ -128,7 +127,7 @@ export class CanvasRenderer {
       this.view.style.height = `${this.height / this.resolution}px`;
     }
     if (this.renderSession.smoothProperty) {
-      this.context[this.renderSession.smoothProperty] = this.renderSession.scaleMode === SCALE_LINEAR;
+      setSmoothing(this.context, this.renderSession.smoothProperty, this.renderSession.scaleMode === SCALE_LINEAR);
     }
   }
 

package/src/phaser/display/canvas/tinter.ts

@@ -3,6 +3,7 @@ import { hex2rgb } from '../../util/math.js';
 import { create, removeByCanvas } from './pool.js';
 import { getRegistry } from '../../core/registry.js';
 import type { Game } from '../../core/game.js';
+import type { Image } from '../image.js';
 
 /**
  * Tints a sprite with the given color.
@@ -10,7 +11,7 @@ import type { Game } from '../../core/game.js';
  * @param {object} color - The color to tint with.
  * @returns {object} The tinted sprite.
  */
-export const getTintedTexture = (sprite: any, color: any) => {
+export const getTintedTexture = (sprite: Image, color: number): HTMLCanvasElement => {
   const canvas = sprite.tintedTexture ?? create('CanvasTinter', 1, 1);
   globalThis.PhaserRegistry.CANVAS_TINT_METHOD(sprite.texture, color, canvas);
   return canvas;
@@ -135,9 +136,9 @@ export const canUseNewCanvasBlendModes = () => {
   // Create test images
   const pngHead = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABAQMAAADD8p2OAAAAA1BMVEX/';
   const pngEnd = 'AAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==';
-  const magenta = new Image();
+  const magenta = new globalThis.Image();
   magenta.src = `${pngHead}AP804Oa6${pngEnd}`;
-  const yellow = new Image();
+  const yellow = new globalThis.Image();
   yellow.src = `${pngHead}/wCKxvRF${pngEnd}`;
   // Create canvas and context
   const canvas = create('CanvasTinter', 6, 1, true);

package/src/phaser/display/canvas/util.ts

@@ -143,16 +143,26 @@ export const getSmoothingPrefix = (context: CanvasRenderingContext2D) => {
   return null;
 };
 
+/**
+ * Writes one of the vendor-prefixed image smoothing properties, which are not on the DOM type.
+ * @param {CanvasRenderingContext2D} context - The canvas rendering context.
+ * @param {string} property - The smoothing property name to write.
+ * @param {boolean} value - The smoothing value to set.
+ */
+export const setSmoothing = (context: CanvasRenderingContext2D, property: string, value: boolean): void => {
+  (context as unknown as Record<string, boolean>)[property] = value;
+};
+
 /**
  * Sets the smoothing enabled property on a canvas rendering context.
- * @param {object} context - The canvas rendering context.
- * @param {number} value - The smoothing enabled value to set.
- * @returns {object} The modified rendering context.
+ * @param {CanvasRenderingContext2D} context - The canvas rendering context.
+ * @param {boolean} value - The smoothing enabled value to set.
+ * @returns {CanvasRenderingContext2D} The modified rendering context.
  */
-export const setSmoothingEnabled = (context: any, value: number) => {
+export const setSmoothingEnabled = (context: CanvasRenderingContext2D, value: boolean) => {
   const s = getSmoothingPrefix(context);
   if (s) {
-    context[s] = value;
+    setSmoothing(context, s, value);
   }
   return context;
 };