@vpmedia/phaser 1.123.0 → 1.125.0

package/src/phaser/display/bitmap_text.test.ts

@@ -58,35 +58,35 @@ const createGame = (font: BitmapFontData | null = FONT): Game =>
 
 const createText = (text: string, size = 10): BitmapText => new BitmapText(createGame(), 0, 0, 'test', text, size);
 
-describe('BitmapText', () => {
-  beforeEach(() => {
+describe('BitmapText', (): void => {
+  beforeEach((): void => {
     getRegistry().CACHE_MISSING_IMAGE = new Texture(atlas, new Rectangle(0, 0, 1, 1));
   });
 
-  describe('updateText', () => {
-    it('measures a single line from the glyph advances', () => {
+  describe('updateText', (): void => {
+    it('measures a single line from the glyph advances', (): void => {
       const bitmapText = createText('AB');
       expect(bitmapText.textWidth).toBe(20);
       expect(bitmapText.textHeight).toBe(12);
     });
 
-    it('scales the metrics with the font size', () => {
+    it('scales the metrics with the font size', (): void => {
       const bitmapText = createText('AB', 20);
       expect(bitmapText.textWidth).toBe(40);
       expect(bitmapText.textHeight).toBe(24);
     });
 
-    it('splits on a newline and takes the widest line as the width', () => {
+    it('splits on a newline and takes the widest line as the width', (): void => {
       const bitmapText = createText('AB\nA');
       expect(bitmapText.textWidth).toBe(20);
       expect(bitmapText.textHeight).toBe(24);
     });
 
-    it('creates one glyph sprite per character', () => {
+    it('creates one glyph sprite per character', (): void => {
       expect(createText('AB')._glyphs).toHaveLength(2);
     });
 
-    it('reuses the glyph pool when the text shrinks', () => {
+    it('reuses the glyph pool when the text shrinks', (): void => {
       const bitmapText = createText('AB');
       const pooled = bitmapText._glyphs;
       bitmapText.text = 'A';
@@ -95,115 +95,115 @@ describe('BitmapText', () => {
       expect(bitmapText.children).toHaveLength(1);
     });
 
-    it('drops the glyphs that left the display list when purged', () => {
+    it('drops the glyphs that left the display list when purged', (): void => {
       const bitmapText = createText('AB');
       bitmapText.text = 'A';
       expect(bitmapText.purgeGlyphs()).toBe(1);
       expect(bitmapText._glyphs).toHaveLength(1);
     });
 
-    it('lays out an empty string as a single empty line', () => {
+    it('lays out an empty string as a single empty line', (): void => {
       const bitmapText = createText('');
       expect(bitmapText.textWidth).toBe(0);
       expect(bitmapText.textHeight).toBe(12);
       expect(bitmapText._glyphs).toHaveLength(0);
     });
 
-    it('does nothing when the font is not in the cache', () => {
+    it('does nothing when the font is not in the cache', (): void => {
       const bitmapText = new BitmapText(createGame(null), 0, 0, 'missing', 'AB');
       expect(bitmapText.textWidth).toBe(0);
       expect(bitmapText._glyphs).toHaveLength(0);
     });
   });
 
-  describe('scanLine', () => {
-    it('reports the whole text when nothing forces a wrap', () => {
+  describe('scanLine', (): void => {
+    it('reports the whole text when nothing forces a wrap', (): void => {
       const line = createText('AB').scanLine(FONT, 1, 'AB');
       expect(line).toMatchObject({ width: 20, text: 'AB', end: true, chars: [0, 10] });
     });
 
-    it('stops at a newline and reports the line as unfinished', () => {
+    it('stops at a newline and reports the line as unfinished', (): void => {
       const line = createText('AB').scanLine(FONT, 1, 'AB\nA');
       expect(line.text).toBe('AB');
       expect(line.end).toBe(false);
     });
 
-    it('wraps at the last space once maxWidth is exceeded', () => {
+    it('wraps at the last space once maxWidth is exceeded', (): void => {
       const bitmapText = createText('A A');
       bitmapText.maxWidth = 20;
       expect(bitmapText.scanLine(FONT, 1, 'A A').text).toBe('A');
     });
 
-    it('substitutes a space for a character the font does not carry', () => {
+    it('substitutes a space for a character the font does not carry', (): void => {
       const line = createText('A').scanLine(FONT, 1, 'Z');
       expect(line.width).toBe(5);
     });
 
-    it('skips a character the font cannot even substitute for', () => {
+    it('skips a character the font cannot even substitute for', (): void => {
       const spaceless: BitmapFontData = { ...FONT, chars: Object.fromEntries([glyph(65, 10)]) };
       expect(createText('A').scanLine(spaceless, 1, 'AZ').width).toBe(10);
     });
   });
 
-  describe('cleanText', () => {
-    it('drops characters the font does not carry', () => {
+  describe('cleanText', (): void => {
+    it('drops characters the font does not carry', (): void => {
       expect(createText('A').cleanText('AZB')).toBe('AB');
     });
 
-    it('replaces them with the given stand-in', () => {
+    it('replaces them with the given stand-in', (): void => {
       expect(createText('A').cleanText('AZB', '?')).toBe('A?B');
     });
 
-    it('keeps line breaks', () => {
+    it('keeps line breaks', (): void => {
       expect(createText('A').cleanText('A\nB')).toBe('A\nB');
     });
   });
 
-  describe('properties', () => {
-    it('re-lays out when the alignment changes', () => {
+  describe('properties', (): void => {
+    it('re-lays out when the alignment changes', (): void => {
       const bitmapText = createText('A\nAB');
       bitmapText.align = 'right';
       expect(bitmapText.align).toBe('right');
       expect(bitmapText._glyphs[0]?.position.x).toBe(10);
     });
 
-    it('ignores an alignment it does not know', () => {
+    it('ignores an alignment it does not know', (): void => {
       const bitmapText = createText('A');
       bitmapText.align = 'sideways';
       expect(bitmapText.align).toBe('left');
     });
 
-    it('coerces a string font size', () => {
+    it('coerces a string font size', (): void => {
       const bitmapText = createText('A');
       bitmapText.fontSize = '20';
       expect(bitmapText.fontSize).toBe(20);
     });
 
-    it('ignores a font size of zero or less', () => {
+    it('ignores a font size of zero or less', (): void => {
       const bitmapText = createText('A');
       bitmapText.fontSize = -5;
       expect(bitmapText.fontSize).toBe(10);
     });
 
-    it('renders the tint as a padded hex string', () => {
+    it('renders the tint as a padded hex string', (): void => {
       const bitmapText = createText('A');
       bitmapText.tint = 0x00ff00;
       expect(bitmapText.fill).toBe('#00FF00');
     });
 
-    it('reads a hex string back into the tint', () => {
+    it('reads a hex string back into the tint', (): void => {
       const bitmapText = createText('A');
       bitmapText.fill = '#FF0000';
       expect(bitmapText.tint).toBe(0xff0000);
     });
 
-    it('trims the font key before looking it up', () => {
+    it('trims the font key before looking it up', (): void => {
       const bitmapText = createText('A');
       bitmapText.font = '  other  ';
       expect(bitmapText.font).toBe('other');
     });
 
-    it('stringifies whatever the text is set to', () => {
+    it('stringifies whatever the text is set to', (): void => {
       const bitmapText = createText('A');
       bitmapText.text = 65;
       expect(bitmapText.text).toBe('65');

package/src/phaser/display/bitmap_text.ts

@@ -80,7 +80,7 @@ export class BitmapText extends DisplayObject {
       return;
     }
 
-    if (!this.exists || !this.parent?.exists) {
+    if (!this.exists || this.parent?.exists !== true) {
       this.renderOrderID = -1;
       return;
     }
@@ -150,7 +150,7 @@ export class BitmapText extends DisplayObject {
       //  What will the line width be if we add this character to it?
       c = (kerning + (charData.texture?.width ?? 0) + charData.xOffset) * scale;
       //  Do we need to line-wrap?
-      if (maxWidth && w + c >= maxWidth && lastSpace > -1) {
+      if (maxWidth !== null && w + c >= maxWidth && lastSpace > -1) {
         //  The last space was at "lastSpace" which was "i - lastSpace" characters ago
         return {
           width: wrappedWidth || w,
@@ -463,7 +463,7 @@ export class BitmapText extends DisplayObject {
    * @returns {boolean} True if smoothing is enabled, false otherwise.
    */
   public get smoothed(): boolean {
-    return !this._data?.base.scaleMode;
+    return this._data?.base.scaleMode === 0;
   }
 
   /**

package/src/phaser/display/button.ts

@@ -4,6 +4,7 @@ import { Signal } from '../core/signal.js';
 import { Image } from './image.js';
 import type { Game } from '../core/game.js';
 import type { SignalListener } from '../core/signal.js';
+import type { Pointer } from '../core/input_pointer.js';
 
 const STATE_OVER = 'Over';
 const STATE_OUT = 'Out';
@@ -25,7 +26,7 @@ export class Button extends Image {
   public onOverMouseOnly!: boolean;
   public justReleasedPreventsOver!: number;
   public freezeFrames!: boolean;
-  public forceOut!: any;
+  public forceOut!: boolean | number;
   public input!: InputHandler;
   /**
    * Creates a new Button instance.
@@ -92,7 +93,7 @@ export class Button extends Image {
     this._onDownFrame = null;
     this._onUpFrame = null;
     this._onDisabledFrame = null;
-    if (this.onInputOver) {
+    if (this.onInputOver !== null) {
       this.onInputOver.dispose();
       this.onInputOut.dispose();
       this.onInputDown.dispose();
@@ -102,7 +103,7 @@ export class Button extends Image {
     this.onInputOut = null!;
     this.onInputDown = null!;
     this.onInputUp = null!;
-    if (this.input) {
+    if (this.input !== null) {
       this.input.destroy();
     }
     this.input = null!;
@@ -147,7 +148,7 @@ export class Button extends Image {
    */
   public setStateFrame(state: string, frame: string | null, switchImmediately = false): void {
     const frameKey: `_on${string}Frame` = `_on${state}Frame`;
-    if (frame) {
+    if (frame !== null) {
       this[frameKey] = frame;
       if (switchImmediately) {
         this.changeStateFrame(state);
@@ -166,7 +167,7 @@ export class Button extends Image {
     if (this.freezeFrames) {
       return false;
     }
-    const state = this.input.enabled || !this._onDisabledFrame ? newState : STATE_DISABLED;
+    const state = this.input.enabled || this._onDisabledFrame === null ? newState : STATE_DISABLED;
     const frameKey: `_on${string}Frame` = `_on${state}Frame`;
     const frame = this[frameKey];
     if (typeof frame === 'string') {
@@ -198,7 +199,7 @@ export class Button extends Image {
     this.setStateFrame(STATE_OUT, outFrame, !this.input.pointerOver());
     this.setStateFrame(STATE_DOWN, downFrame, this.input.pointerDown());
     this.setStateFrame(STATE_UP, upFrame, this.input.pointerUp());
-    if (disabledFrame) {
+    if (disabledFrame !== null) {
       this.setStateFrame(STATE_DISABLED, disabledFrame, !this.input.enabled);
     }
   }
@@ -208,7 +209,7 @@ export class Button extends Image {
    * @param {object} _sprite - The sprite that triggered the event.
    * @param {object} pointer - The pointer that triggered the event.
    */
-  public onInputOverHandler(_sprite: any, pointer: any): void {
+  public onInputOverHandler(_sprite: Image, pointer: Pointer): void {
     if (pointer.justReleased() && (this.justReleasedPreventsOver & pointer.pointerMode) === pointer.pointerMode) {
       //  If the Pointer was only just released then we don't fire an over event
       return;
@@ -217,7 +218,7 @@ export class Button extends Image {
     if (this.onOverMouseOnly && !pointer.isMouse) {
       return;
     }
-    if (this.onInputOver) {
+    if (this.onInputOver !== null) {
       this.onInputOver.dispatch(this, pointer);
     }
   }
@@ -227,9 +228,9 @@ export class Button extends Image {
    * @param {object} _sprite - The sprite that triggered the event.
    * @param {object} pointer - The pointer that triggered the event.
    */
-  public onInputOutHandler(_sprite: any, pointer: any): void {
+  public onInputOutHandler(_sprite: Image, pointer: Pointer): void {
     this.changeStateFrame(STATE_OUT);
-    if (this.onInputOut) {
+    if (this.onInputOut !== null) {
       this.onInputOut.dispatch(this, pointer);
     }
   }
@@ -239,9 +240,9 @@ export class Button extends Image {
    * @param {object} _sprite - The sprite that triggered the event.
    * @param {object} pointer - The pointer that triggered the event.
    */
-  public onInputDownHandler(_sprite: any, pointer: any): void {
+  public onInputDownHandler(_sprite: Image, pointer: Pointer): void {
     this.changeStateFrame(STATE_DOWN);
-    if (this.onInputDown) {
+    if (this.onInputDown !== null) {
       this.onInputDown.dispatch(this, pointer);
     }
   }
@@ -252,14 +253,15 @@ export class Button extends Image {
    * @param {object} pointer - The pointer that triggered the event.
    * @param {boolean} isOver - Whether the pointer is currently over the button (default: true).
    */
-  public onInputUpHandler(_sprite: any, pointer: any, isOver: boolean): void {
-    if (this.onInputUp) {
+  public onInputUpHandler(_sprite: Image, pointer: Pointer, isOver: boolean): void {
+    if (this.onInputUp !== null) {
       this.onInputUp.dispatch(this, pointer, isOver);
     }
     if (this.freezeFrames) {
       return;
     }
-    if (this.forceOut === true || (this.forceOut & pointer.pointerMode) === pointer.pointerMode) {
+    const forcedOutMode = typeof this.forceOut === 'number' ? this.forceOut : 0;
+    if (this.forceOut === true || (forcedOutMode & pointer.pointerMode) === pointer.pointerMode) {
       this.changeStateFrame(STATE_OUT);
     } else {
       const changedUp = this.changeStateFrame(STATE_UP);
@@ -279,7 +281,7 @@ export class Button extends Image {
    * @returns {boolean} True if input is enabled, false otherwise.
    */
   public get inputEnabled(): boolean {
-    return this.input && this.input.enabled;
+    return this.input !== null && this.input.enabled;
   }
 
   /**
@@ -291,10 +293,10 @@ export class Button extends Image {
       if (this.input === null) {
         this.input = new InputHandler(this);
         this.input.start();
-      } else if (this.input && !this.input.enabled) {
+      } else if (this.input !== null && !this.input.enabled) {
         this.input.start();
       }
-    } else if (this.input && this.input.enabled) {
+    } else if (this.input !== null && this.input.enabled) {
       this.input.stop();
     }
   }

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

@@ -3,7 +3,7 @@ import { create, removeByCanvas } from './pool.js';
 export class CanvasBuffer {
   public width!: number;
   public height!: number;
-  public canvas!: any;
+  public canvas!: HTMLCanvasElement;
   public context!: CanvasRenderingContext2D;
   /**
    * Creates a new CanvasBuffer instance.
@@ -14,7 +14,7 @@ export class CanvasBuffer {
     this.width = width;
     this.height = height;
     this.canvas = create(this, this.width, this.height);
-    this.context = this.canvas.getContext('2d', { willReadFrequently: false });
+    this.context = this.canvas.getContext('2d', { willReadFrequently: false })!;
     this.canvas.width = width;
     this.canvas.height = height;
   }

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

@@ -71,7 +71,7 @@ export const renderGraphics = (graphics: Graphics, context: CanvasRenderingConte
         context.stroke();
       }
     } else if (shape instanceof Rectangle) {
-      if (data.fillColor || data.fillColor === 0) {
+      if (data.fillColor !== null) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
         context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fillRect(shape.x, shape.y, shape.width, shape.height);
@@ -144,7 +144,7 @@ export const renderGraphics = (graphics: Graphics, context: CanvasRenderingConte
       context.lineTo(rx + radius, ry);
       context.quadraticCurveTo(rx, ry, rx, ry + radius);
       context.closePath();
-      if (data.fillColor || data.fillColor === 0) {
+      if (data.fillColor !== null) {
         context.globalAlpha = data.fillAlpha * worldAlpha;
         context.fillStyle = `#${`00000${Math.trunc(fillColor ?? 0).toString(16)}`.slice(-6)}`;
         context.fill();

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

@@ -7,7 +7,7 @@ import type { Graphics } from '../graphics.js';
  * @param {object} maskData - The mask data to apply.
  * @param {object} renderSession - The rendering session object.
  */
-export const pushMask = (maskData: any, renderSession: RenderSession): void => {
+export const pushMask = (maskData: Graphics, renderSession: RenderSession): void => {
   const { context } = renderSession;
   context.save();
   const cacheAlpha = maskData.alpha;

package/src/phaser/display/canvas/pool.test.ts

@@ -1,20 +1,20 @@
 import { beforeEach, describe, expect, it } from 'vitest';
 import { create, getFirst, getFree, getPool, getTotal, remove, removeByCanvas } from './pool.js';
 
-describe('canvas pool', () => {
-  beforeEach(() => {
+describe('canvas pool', (): void => {
+  beforeEach((): void => {
     getPool().length = 0;
   });
 
-  describe('getPool', () => {
-    it('lazily creates the backing array and returns the same one thereafter', () => {
+  describe('getPool', (): void => {
+    it('lazily creates the backing array and returns the same one thereafter', (): void => {
       expect(getPool()).toBe(getPool());
       expect(getPool()).toStrictEqual([]);
     });
   });
 
-  describe('create', () => {
-    it('adds a new entry when the pool is empty', () => {
+  describe('create', (): void => {
+    it('adds a new entry when the pool is empty', (): void => {
       const parent = { name: 'owner' };
       const canvas = create(parent);
       expect(getPool()).toHaveLength(1);
@@ -22,7 +22,7 @@ describe('canvas pool', () => {
       expect(getPool()[0]?.canvas).toBe(canvas);
     });
 
-    it('reuses a free entry instead of growing the pool', () => {
+    it('reuses a free entry instead of growing the pool', (): void => {
       const first = { name: 'first' };
       const canvas = create(first);
       remove(first);
@@ -32,7 +32,7 @@ describe('canvas pool', () => {
       expect(getPool()[0]?.parent).toBe(second);
     });
 
-    it('grows the pool when skipPool is set even if an entry is free', () => {
+    it('grows the pool when skipPool is set even if an entry is free', (): void => {
       const first = { name: 'first' };
       create(first);
       remove(first);
@@ -40,20 +40,20 @@ describe('canvas pool', () => {
       expect(getPool()).toHaveLength(2);
     });
 
-    it('applies the requested dimensions', () => {
+    it('applies the requested dimensions', (): void => {
       const canvas = create({ name: 'sized' }, 64, 32);
       expect(canvas.width).toBe(64);
       expect(canvas.height).toBe(32);
     });
   });
 
-  describe('getFirst', () => {
-    it('reports -1 when every entry is claimed', () => {
+  describe('getFirst', (): void => {
+    it('reports -1 when every entry is claimed', (): void => {
       create({ name: 'owner' });
       expect(getFirst()).toBe(-1);
     });
 
-    it('reports the index of the first free entry', () => {
+    it('reports the index of the first free entry', (): void => {
       create({ name: 'a' });
       const b = { name: 'b' };
       create(b);
@@ -63,8 +63,8 @@ describe('canvas pool', () => {
     });
   });
 
-  describe('remove', () => {
-    it('frees the entry and shrinks its canvas to 1x1', () => {
+  describe('remove', (): void => {
+    it('frees the entry and shrinks its canvas to 1x1', (): void => {
       const parent = { name: 'owner' };
       const canvas = create(parent, 100, 50);
       remove(parent);
@@ -73,17 +73,17 @@ describe('canvas pool', () => {
       expect(canvas.height).toBe(1);
     });
 
-    it('ignores a parent that owns nothing', () => {
+    it('ignores a parent that owns nothing', (): void => {
       create({ name: 'owner' });
-      expect(() => {
+      expect((): void => {
         remove({ name: 'stranger' });
       }).not.toThrow();
       expect(getPool()[0]?.parent).not.toBeNull();
     });
   });
 
-  describe('removeByCanvas', () => {
-    it('frees the entry holding that canvas', () => {
+  describe('removeByCanvas', (): void => {
+    it('frees the entry holding that canvas', (): void => {
       const canvas = create({ name: 'owner' }, 100, 50);
       removeByCanvas(canvas);
       expect(getPool()[0]?.parent).toBeNull();
@@ -91,8 +91,8 @@ describe('canvas pool', () => {
     });
   });
 
-  describe('getTotal and getFree', () => {
-    it('count claimed and unclaimed entries', () => {
+  describe('getTotal and getFree', (): void => {
+    it('count claimed and unclaimed entries', (): void => {
       const a = { name: 'a' };
       create(a);
       create({ name: 'b' });

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

@@ -16,7 +16,7 @@ export const getPool = (): CanvasPoolEntry[] => {
 export const getFirst = (): number => {
   const pool = getPool();
   for (let i = 0; i < pool.length; i += 1) {
-    if (!pool[i]!.parent) {
+    if (pool[i]!.parent === null) {
       return i;
     }
   }
@@ -27,7 +27,7 @@ export const getFirst = (): number => {
  * Adds a canvas to the pool with the specified parent.
  * @param {object} parent - The parent object for the canvas.
  */
-export const remove = (parent: any): void => {
+export const remove = (parent: CanvasOwner): void => {
   const pool = getPool();
   for (const entry of pool) {
     if (entry.parent === parent) {
@@ -61,7 +61,7 @@ export const getTotal = (): number => {
   const pool = getPool();
   let c = 0;
   for (const entry of pool) {
-    if (entry.parent) {
+    if (entry.parent !== null) {
       c += 1;
     }
   }
@@ -76,7 +76,7 @@ export const getFree = (): number => {
   const pool = getPool();
   let c = 0;
   for (const entry of pool) {
-    if (!entry.parent) {
+    if (entry.parent === null) {
       c += 1;
     }
   }
@@ -91,7 +91,7 @@ export const getFree = (): number => {
  * @param {boolean} skipPool - True to skip using the pool and create a new canvas.
  * @returns {HTMLCanvasElement} The canvas from the pool or a newly created one.
  */
-export const create = (parent: any, width?: any, height?: any, skipPool = false): HTMLCanvasElement => {
+export const create = (parent: CanvasOwner, width?: number, height?: number, skipPool = false): HTMLCanvasElement => {
   if (parent === undefined) {
     console.warn('Created CanvasPool element with undefined parent.');
   }
@@ -111,7 +111,7 @@ export const create = (parent: any, width?: any, height?: any, skipPool = false)
   const { canvas } = entry;
   if (width !== undefined) {
     canvas.width = width;
-    canvas.height = height;
+    canvas.height = height ?? 0;
   }
   return canvas;
 };

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

@@ -26,21 +26,23 @@ import { ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT } from '../../core/error_code.j
 import * as CanvasMaskManager from './masker.js';
 import { detectCapabilities } from './tinter.js';
 import { getSmoothingPrefix, setSmoothing } from './util.js';
+import type { DisplayObject } from '../display_object.js';
 import type { RenderSession } from '../render_session.js';
+import type { StageBackgroundColor } from '../../core/stage.js';
 
 export class CanvasRenderer {
-  public type!: any;
+  public type!: number;
   public resolution!: number;
-  public clearBeforeRender!: any;
-  public transparent!: any;
-  public autoResize!: any;
-  public contextLost!: any;
+  public clearBeforeRender!: boolean;
+  public transparent!: boolean;
+  public autoResize!: boolean;
+  public contextLost!: boolean;
   public width!: number;
   public height!: number;
   public view!: HTMLCanvasElement;
   public context!: CanvasRenderingContext2D;
-  public refresh!: any;
-  public count!: any;
+  public refresh!: boolean;
+  public count!: number;
   public renderSession!: RenderSession;
   /**
    * Creates a new CanvasRenderer instance.
@@ -52,7 +54,7 @@ export class CanvasRenderer {
     this.type = RENDER_CANVAS;
     this.resolution = game.config.resolution;
     this.clearBeforeRender = game.config.clearBeforeRender;
-    this.transparent = game.config.transparent;
+    this.transparent = Boolean(game.config.transparent);
     this.autoResize = false;
     this.contextLost = false;
     this.width = game.width * this.resolution;
@@ -62,8 +64,8 @@ export class CanvasRenderer {
     this.context = this.view.getContext('2d', {
       willReadFrequently: false,
       alpha: this.transparent,
-    }) as CanvasRenderingContext2D;
-    if (!this.context) {
+    })!;
+    if (!(this.context as CanvasRenderingContext2D | undefined)) {
       throw new Error(ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT);
     }
     this.refresh = true;
@@ -85,7 +87,7 @@ export class CanvasRenderer {
    * @param {Stage} root - The root stage to render.
    */
   public render(root: Stage): void {
-    if (!this.context) {
+    if (!(this.context as CanvasRenderingContext2D | undefined)) {
       return;
     }
     this.context.setTransform(1, 0, 0, 1, 0, 0);
@@ -97,7 +99,7 @@ export class CanvasRenderer {
     if (this.clearBeforeRender) {
       if (this.transparent) {
         this.context.clearRect(0, 0, this.width, this.height);
-      } else if (root._bgColor) {
+      } else if (root._bgColor as StageBackgroundColor | undefined) {
         this.context.fillStyle = root._bgColor.rgba;
         this.context.fillRect(0, 0, this.width, this.height);
       }
@@ -129,7 +131,7 @@ export class CanvasRenderer {
       this.view.style.width = `${this.width / this.resolution}px`;
       this.view.style.height = `${this.height / this.resolution}px`;
     }
-    if (this.renderSession.smoothProperty) {
+    if (this.renderSession.smoothProperty !== null) {
       setSmoothing(this.context, this.renderSession.smoothProperty, this.renderSession.scaleMode === SCALE_LINEAR);
     }
   }
@@ -140,17 +142,17 @@ export class CanvasRenderer {
    * @param {CanvasRenderingContext2D} context - The canvas rendering context.
    * @param {Matrix} matrix - The transformation matrix.
    */
-  public renderDisplayObject(displayObject: any, context?: any, matrix?: any): void {
+  public renderDisplayObject(displayObject: DisplayObject, context?: CanvasRenderingContext2D): void {
     this.renderSession.context = context ?? this.context;
     this.renderSession.resolution = this.resolution;
-    displayObject.renderCanvas(this.renderSession, matrix);
+    displayObject.renderCanvas(this.renderSession);
   }
 
   /**
    * Maps blend modes to canvas rendering operations.
    */
   public mapBlendModes(): void {
-    if (globalThis.PhaserRegistry.blendModesCanvas) {
+    if (globalThis.PhaserRegistry.blendModesCanvas as GlobalCompositeOperation[] | undefined) {
       return;
     }
     const b: GlobalCompositeOperation[] = [];

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

@@ -179,7 +179,7 @@ export const canUseNewCanvasBlendModes = (): boolean => {
   context.globalCompositeOperation = 'multiply';
   context.drawImage(magenta, 0, 0);
   context.drawImage(yellow, 2, 0);
-  if (!context.getImageData(2, 0, 1, 1)) {
+  if (context.getImageData(2, 0, 1, 1) === null) {
     return false;
   }
   const { data } = context.getImageData(2, 0, 1, 1);