@vpmedia/phaser 1.122.0 → 1.124.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.
@@ -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;
@@ -227,7 +228,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 onInputOutHandler(_sprite: any, pointer: any): void {
+  public onInputOutHandler(_sprite: Image, pointer: Pointer): void {
     this.changeStateFrame(STATE_OUT);
     if (this.onInputOut) {
       this.onInputOut.dispatch(this, pointer);
@@ -239,7 +240,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 onInputDownHandler(_sprite: any, pointer: any): void {
+  public onInputDownHandler(_sprite: Image, pointer: Pointer): void {
     this.changeStateFrame(STATE_DOWN);
     if (this.onInputDown) {
       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 {
+  public onInputUpHandler(_sprite: Image, pointer: Pointer, isOver: boolean): void {
     if (this.onInputUp) {
       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);

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/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

@@ -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) {
@@ -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,22 @@ 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';
 
 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 +53,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,7 +63,7 @@ export class CanvasRenderer {
     this.context = this.view.getContext('2d', {
       willReadFrequently: false,
       alpha: this.transparent,
-    }) as CanvasRenderingContext2D;
+    })!;
     if (!this.context) {
       throw new Error(ENGINE_ERROR_CREATING_CANVAS_2D_CONTEXT);
     }
@@ -140,10 +141,10 @@ 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);
   }
 
   /**

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

@@ -3,36 +3,36 @@ import { addToDOM, create, removeFromDOM, setBackgroundColor, setTouchAction, se
 
 const createCanvas = (): HTMLCanvasElement => create(null, 32, 16, '', true);
 
-describe('canvas util', () => {
-  afterEach(() => {
+describe('canvas util', (): void => {
+  afterEach((): void => {
     document.body.innerHTML = '';
   });
 
-  describe('create', () => {
-    it('sizes the canvas as asked', () => {
+  describe('create', (): void => {
+    it('sizes the canvas as asked', (): void => {
       const canvas = createCanvas();
       expect(canvas.width).toBe(32);
       expect(canvas.height).toBe(16);
     });
 
-    it('falls back to 256 square for a zero size', () => {
+    it('falls back to 256 square for a zero size', (): void => {
       const canvas = create(null, 0, 0, '', true);
       expect(canvas.width).toBe(256);
       expect(canvas.height).toBe(256);
     });
 
-    it('assigns the id it is given and leaves an empty one off', () => {
+    it('assigns the id it is given and leaves an empty one off', (): void => {
       expect(create(null, 32, 16, 'stage', true).id).toBe('stage');
       expect(createCanvas().id).toBe('');
     });
 
-    it('takes the canvas out of the flow', () => {
+    it('takes the canvas out of the flow', (): void => {
       expect(createCanvas().style.display).toBe('block');
     });
   });
 
-  describe('addToDOM', () => {
-    it('appends to the element with the given id', () => {
+  describe('addToDOM', (): void => {
+    it('appends to the element with the given id', (): void => {
       const host = document.createElement('div');
       host.id = 'host';
       document.body.append(host);
@@ -41,7 +41,7 @@ describe('canvas util', () => {
       expect(canvas.parentElement).toBe(host);
     });
 
-    it('appends to an element passed directly', () => {
+    it('appends to an element passed directly', (): void => {
       const host = document.createElement('div');
       document.body.append(host);
       const canvas = createCanvas();
@@ -49,19 +49,26 @@ describe('canvas util', () => {
       expect(canvas.parentElement).toBe(host);
     });
 
-    it('falls back to the body for an id nothing matches', () => {
+    it('falls back to the body for an id nothing matches', (): void => {
       const canvas = createCanvas();
       addToDOM(canvas, 'nothing-here');
       expect(canvas.parentElement).toBe(document.body);
     });
 
-    it('falls back to the body when given no parent', () => {
+    it('falls back to the body when given no parent', (): void => {
       const canvas = createCanvas();
       addToDOM(canvas, null);
       expect(canvas.parentElement).toBe(document.body);
     });
 
-    it('hides the parent overflow unless told not to', () => {
+    // An empty id used to build the selector `#`, which throws before the body fallback is reached.
+    it('falls back to the body for an empty id', (): void => {
+      const canvas = createCanvas();
+      addToDOM(canvas, '');
+      expect(canvas.parentElement).toBe(document.body);
+    });
+
+    it('hides the parent overflow unless told not to', (): void => {
       const host = document.createElement('div');
       document.body.append(host);
       addToDOM(createCanvas(), host);
@@ -72,7 +79,7 @@ describe('canvas util', () => {
       expect(other.style.overflow).toBe('');
     });
 
-    it('survives an id that is not a valid bare selector', () => {
+    it('survives an id that is not a valid bare selector', (): void => {
       const host = document.createElement('div');
       host.id = 'game.container';
       document.body.append(host);
@@ -82,40 +89,40 @@ describe('canvas util', () => {
     });
   });
 
-  describe('removeFromDOM', () => {
-    it('detaches an attached canvas', () => {
+  describe('removeFromDOM', (): void => {
+    it('detaches an attached canvas', (): void => {
       const canvas = createCanvas();
       document.body.append(canvas);
       removeFromDOM(canvas);
       expect(canvas.parentElement).toBeNull();
     });
 
-    it('leaves a detached canvas alone', () => {
+    it('leaves a detached canvas alone', (): void => {
       const canvas = createCanvas();
-      expect(() => {
+      expect((): void => {
         removeFromDOM(canvas);
       }).not.toThrow();
     });
   });
 
-  describe('style helpers', () => {
-    it('sets the background colour', () => {
+  describe('style helpers', (): void => {
+    it('sets the background colour', (): void => {
       expect(setBackgroundColor(createCanvas(), 'rgb(255, 0, 0)').style.backgroundColor).toBe('rgb(255, 0, 0)');
     });
 
-    it('disables touch actions', () => {
+    it('disables touch actions', (): void => {
       expect(setTouchAction(createCanvas()).style.getPropertyValue('touch-action')).toBe('none');
     });
 
-    it('falls back to none for an empty touch action', () => {
+    it('falls back to none for an empty touch action', (): void => {
       expect(setTouchAction(createCanvas(), '').style.getPropertyValue('touch-action')).toBe('none');
     });
 
-    it('disables user selection', () => {
+    it('disables user selection', (): void => {
       expect(setUserSelect(createCanvas()).style.getPropertyValue('user-select')).toBe('none');
     });
 
-    it('falls back to none for an empty user selection', () => {
+    it('falls back to none for an empty user selection', (): void => {
       expect(setUserSelect(createCanvas(), '').style.getPropertyValue('user-select')).toBe('none');
     });
   });

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

@@ -83,10 +83,10 @@ export const addToDOM = (
   overflowHidden = true
 ): HTMLCanvasElement => {
   let target: HTMLElement | null = null;
-  if (typeof parent === 'string') {
+  if (typeof parent === 'string' && parent !== '') {
     // hopefully an element ID
     target = document.querySelector<HTMLElement>(`#${CSS.escape(parent)}`);
-  } else if (parent?.nodeType === 1) {
+  } else if (typeof parent === 'object' && parent?.nodeType === 1) {
     target = parent;
   }
   // Fallback, covers an invalid ID and a non HTMLelement object

package/src/phaser/display/display_object.ts

@@ -123,8 +123,10 @@ export class DisplayObject {
 
   /**
    * Destroys this display object and cleans up resources.
+   * @param {boolean} _destroyChildren - Whether the subclass should destroy its children too.
+   * @param {boolean} _destroyTexture - Whether the subclass should destroy its texture too.
    */
-  public destroy(): void {
+  public destroy(_destroyChildren = true, _destroyTexture = false): void {
     if (this.children) {
       let i = this.children.length;
       while (i) {

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

@@ -9,11 +9,11 @@ const createGame = (): Game => ({ renderer: { resolution: 1 } }) as unknown as G
 
 const createGraphics = (): Graphics => new Graphics(createGame());
 
-describe('Graphics', () => {
-  describe('containsPoint', () => {
+describe('Graphics', (): void => {
+  describe('containsPoint', (): void => {
     // The index never advanced here, so any filled shape that did not contain the point spun
     // forever. A vitest timeout is the only way a hang shows up as a failure.
-    it('returns false for a point outside a filled shape instead of hanging', { timeout: 2000 }, () => {
+    it('returns false for a point outside a filled shape instead of hanging', { timeout: 2000 }, (): void => {
       const graphics = createGraphics();
       graphics.beginFill(0xff0000);
       graphics.drawRect(0, 0, 10, 10);
@@ -21,7 +21,7 @@ describe('Graphics', () => {
       expect(graphics.containsPoint(new Point(100, 100), new Point())).toBe(false);
     });
 
-    it('returns true for a point inside a filled shape', { timeout: 2000 }, () => {
+    it('returns true for a point inside a filled shape', { timeout: 2000 }, (): void => {
       const graphics = createGraphics();
       graphics.beginFill(0xff0000);
       graphics.drawRect(0, 0, 10, 10);
@@ -29,7 +29,7 @@ describe('Graphics', () => {
       expect(graphics.containsPoint(new Point(5, 5), new Point())).toBe(true);
     });
 
-    it('walks past a non-matching shape to a later matching one', { timeout: 2000 }, () => {
+    it('walks past a non-matching shape to a later matching one', { timeout: 2000 }, (): void => {
       const graphics = createGraphics();
       graphics.beginFill(0xff0000);
       graphics.drawRect(0, 0, 10, 10);
@@ -38,33 +38,33 @@ describe('Graphics', () => {
       expect(graphics.containsPoint(new Point(105, 105), new Point())).toBe(true);
     });
 
-    it('ignores unfilled shapes', { timeout: 2000 }, () => {
+    it('ignores unfilled shapes', { timeout: 2000 }, (): void => {
       const graphics = createGraphics();
       graphics.lineStyle(1, 0x00ff00);
       graphics.drawRect(0, 0, 10, 10);
       expect(graphics.containsPoint(new Point(5, 5), new Point())).toBe(false);
     });
 
-    it('returns false when nothing has been drawn', { timeout: 2000 }, () => {
+    it('returns false when nothing has been drawn', { timeout: 2000 }, (): void => {
       expect(createGraphics().containsPoint(new Point(0, 0), new Point())).toBe(false);
     });
   });
 
-  describe('drawShape', () => {
-    it('records a polygon as the current path', () => {
+  describe('drawShape', (): void => {
+    it('records a polygon as the current path', (): void => {
       const graphics = createGraphics();
       const data = graphics.drawShape(new Polygon([0, 0, 10, 0, 10, 10]));
       expect(graphics.currentPath).toBe(data);
       expect(data.shape).toBeInstanceOf(Polygon);
     });
 
-    it('does not record a rectangle as the current path', () => {
+    it('does not record a rectangle as the current path', (): void => {
       const graphics = createGraphics();
       graphics.drawShape(new Rectangle(0, 0, 10, 10));
       expect(graphics.currentPath).toBeNull();
     });
 
-    it('carries the current fill and line style onto the data', () => {
+    it('carries the current fill and line style onto the data', (): void => {
       const graphics = createGraphics();
       graphics.lineStyle(4, 0x00ff00, 0.5);
       graphics.beginFill(0xff0000, 0.25);
@@ -77,15 +77,15 @@ describe('Graphics', () => {
       expect(data.fill).toBe(true);
     });
 
-    it('flattens a polygon so the builders see numbers', () => {
+    it('flattens a polygon so the builders see numbers', (): void => {
       const graphics = createGraphics();
       const data = graphics.drawShape(new Polygon([new Point(0, 0), new Point(10, 0), new Point(10, 10)]));
-      expect((data.shape as Polygon)._points.every((value) => typeof value === 'number')).toBe(true);
+      expect((data.shape as Polygon)._points.every((value): boolean => typeof value === 'number')).toBe(true);
     });
   });
 
-  describe('path building', () => {
-    it('accumulates points through moveTo and lineTo', () => {
+  describe('path building', (): void => {
+    it('accumulates points through moveTo and lineTo', (): void => {
       const graphics = createGraphics();
       graphics.moveTo(0, 0);
       graphics.lineTo(10, 0);
@@ -93,15 +93,15 @@ describe('Graphics', () => {
       expect(graphics.currentPath?.shape.points).toStrictEqual([0, 0, 10, 0, 10, 10]);
     });
 
-    it('starts a path at the origin when lineTo comes first', () => {
+    it('starts a path at the origin when lineTo comes first', (): void => {
       const graphics = createGraphics();
       graphics.lineTo(10, 10);
       expect(graphics.currentPath?.shape.points).toStrictEqual([0, 0, 10, 10]);
     });
   });
 
-  describe('endFill', () => {
-    it('stops filling subsequent shapes', () => {
+  describe('endFill', (): void => {
+    it('stops filling subsequent shapes', (): void => {
       const graphics = createGraphics();
       graphics.beginFill(0xff0000);
       graphics.endFill();
@@ -109,8 +109,58 @@ describe('Graphics', () => {
     });
   });
 
-  describe('clear', () => {
-    it('drops the recorded graphics data', () => {
+  describe('drawTriangle', (): void => {
+    it('records the triangle as a polygon', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangle([new Point(0, 0), new Point(10, 0), new Point(0, 10)]);
+      expect(graphics.graphicsData).toHaveLength(1);
+      expect(graphics.graphicsData[0]?.shape).toBeInstanceOf(Polygon);
+    });
+
+    it('keeps a front-facing triangle when culling', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangle([new Point(0, 0), new Point(10, 0), new Point(0, 10)], true);
+      graphics.drawTriangle([new Point(0, 0), new Point(0, 10), new Point(10, 0)], true);
+      expect(graphics.graphicsData).toHaveLength(1);
+    });
+
+    it('draws both windings when culling is off', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangle([new Point(0, 0), new Point(10, 0), new Point(0, 10)]);
+      graphics.drawTriangle([new Point(0, 0), new Point(0, 10), new Point(10, 0)]);
+      expect(graphics.graphicsData).toHaveLength(2);
+    });
+  });
+
+  describe('drawTriangles', (): void => {
+    it('reads a flat coordinate list as triangles', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangles([0, 0, 10, 0, 0, 10, 20, 20, 30, 20, 20, 30], null as unknown as number[]);
+      expect(graphics.graphicsData).toHaveLength(2);
+    });
+
+    it('reads a point list as triangles', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangles([new Point(0, 0), new Point(10, 0), new Point(0, 10)], null as unknown as number[]);
+      expect(graphics.graphicsData).toHaveLength(1);
+    });
+
+    it('follows an index list over a flat coordinate list', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangles([0, 0, 10, 0, 0, 10], [0, 1, 2]);
+      expect(graphics.graphicsData).toHaveLength(1);
+      expect((graphics.graphicsData[0]!.shape as Polygon).toNumberArray()).toStrictEqual([0, 0, 10, 0, 0, 10]);
+    });
+
+    it('follows an index list over a point list', (): void => {
+      const graphics = createGraphics();
+      graphics.drawTriangles([new Point(0, 0), new Point(10, 0), new Point(0, 10)], [0, 1, 2]);
+      expect(graphics.graphicsData).toHaveLength(1);
+    });
+  });
+
+  describe('clear', (): void => {
+    it('drops the recorded graphics data', (): void => {
       const graphics = createGraphics();
       graphics.beginFill(0xff0000);
       graphics.drawRect(0, 0, 10, 10);