@vpmedia/phaser 1.120.0 → 1.121.0

package/src/phaser/core/tween_easing.ts

@@ -3,28 +3,28 @@
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const LinearNone = (k: number): number => k;
+export const linearNone = (k: number): number => k;
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuadraticIn = (k: number): number => k * k;
+export const quadraticIn = (k: number): number => k * k;
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuadraticOut = (k: number): number => k * (2 - k);
+export const quadraticOut = (k: number): number => k * (2 - k);
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuadraticInOut = (k: number): number => {
+export const quadraticInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return 0.5 * t * t;
@@ -38,14 +38,14 @@ export const QuadraticInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CubicIn = (k: number): number => k * k * k;
+export const cubicIn = (k: number): number => k * k * k;
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CubicOut = (k: number): number => {
+export const cubicOut = (k: number): number => {
   const u = k - 1;
   return u * u * u + 1;
 };
@@ -55,7 +55,7 @@ export const CubicOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CubicInOut = (k: number): number => {
+export const cubicInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return 0.5 * t * t * t;
@@ -69,14 +69,14 @@ export const CubicInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuarticIn = (k: number): number => k * k * k * k;
+export const quarticIn = (k: number): number => k * k * k * k;
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuarticOut = (k: number): number => {
+export const quarticOut = (k: number): number => {
   const u = k - 1;
   return 1 - u * u * u * u;
 };
@@ -86,7 +86,7 @@ export const QuarticOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuarticInOut = (k: number): number => {
+export const quarticInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return 0.5 * t * t * t * t;
@@ -100,14 +100,14 @@ export const QuarticInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuinticIn = (k: number): number => k * k * k * k * k;
+export const quinticIn = (k: number): number => k * k * k * k * k;
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuinticOut = (k: number): number => {
+export const quinticOut = (k: number): number => {
   const u = k - 1;
   return u * u * u * u * u + 1;
 };
@@ -117,7 +117,7 @@ export const QuinticOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const QuinticInOut = (k: number): number => {
+export const quinticInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return 0.5 * t * t * t * t * t;
@@ -131,7 +131,7 @@ export const QuinticInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const SinusoidalIn = (k: number): number => {
+export const sinusoidalIn = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -146,7 +146,7 @@ export const SinusoidalIn = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const SinusoidalOut = (k: number): number => {
+export const sinusoidalOut = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -161,7 +161,7 @@ export const SinusoidalOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const SinusoidalInOut = (k: number): number => {
+export const sinusoidalInOut = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -176,21 +176,21 @@ export const SinusoidalInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ExponentialIn = (k: number): number => (k === 0 ? 0 : 1024 ** (k - 1));
+export const exponentialIn = (k: number): number => (k === 0 ? 0 : 1024 ** (k - 1));
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ExponentialOut = (k: number): number => (k === 1 ? 1 : 1 - 2 ** (-10 * k));
+export const exponentialOut = (k: number): number => (k === 1 ? 1 : 1 - 2 ** (-10 * k));
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ExponentialInOut = (k: number): number => {
+export const exponentialInOut = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -209,14 +209,14 @@ export const ExponentialInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CircularIn = (k: number): number => 1 - Math.sqrt(1 - k * k);
+export const circularIn = (k: number): number => 1 - Math.sqrt(1 - k * k);
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CircularOut = (k: number): number => {
+export const circularOut = (k: number): number => {
   const u = k - 1;
   return Math.sqrt(1 - u * u);
 };
@@ -226,7 +226,7 @@ export const CircularOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const CircularInOut = (k: number): number => {
+export const circularInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return -0.5 * (Math.sqrt(1 - t * t) - 1);
@@ -244,7 +244,7 @@ const ELASTIC_PHASE = ELASTIC_PERIOD / 4;
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ElasticIn = (k: number): number => {
+export const elasticIn = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -260,7 +260,7 @@ export const ElasticIn = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ElasticOut = (k: number): number => {
+export const elasticOut = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -275,7 +275,7 @@ export const ElasticOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const ElasticInOut = (k: number): number => {
+export const elasticInOut = (k: number): number => {
   if (k === 0) {
     return 0;
   }
@@ -299,14 +299,14 @@ const BACK_OVERSHOOT_IN_OUT = BACK_OVERSHOOT * 1.525;
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BackIn = (k: number): number => k * k * ((BACK_OVERSHOOT + 1) * k - BACK_OVERSHOOT);
+export const backIn = (k: number): number => k * k * ((BACK_OVERSHOOT + 1) * k - BACK_OVERSHOOT);
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BackOut = (k: number): number => {
+export const backOut = (k: number): number => {
   const u = k - 1;
   return u * u * ((BACK_OVERSHOOT + 1) * u + BACK_OVERSHOOT) + 1;
 };
@@ -316,7 +316,7 @@ export const BackOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BackInOut = (k: number): number => {
+export const backInOut = (k: number): number => {
   const t = k * 2;
   if (t < 1) {
     return 0.5 * (t * t * ((BACK_OVERSHOOT_IN_OUT + 1) * t - BACK_OVERSHOOT_IN_OUT));
@@ -330,7 +330,7 @@ export const BackInOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BounceOut = (k: number): number => {
+export const bounceOut = (k: number): number => {
   if (k < 1 / 2.75) {
     return 7.5625 * k * k;
   }
@@ -351,16 +351,16 @@ export const BounceOut = (k: number): number => {
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BounceIn = (k: number): number => 1 - BounceOut(1 - k);
+export const bounceIn = (k: number): number => 1 - bounceOut(1 - k);
 
 /**
  * TBD.
  * @param {number} k - TBD.
  * @returns {number} TBD.
  */
-export const BounceInOut = (k: number): number => {
+export const bounceInOut = (k: number): number => {
   if (k < 0.5) {
-    return BounceIn(k * 2) * 0.5;
+    return bounceIn(k * 2) * 0.5;
   }
-  return BounceOut(k * 2 - 1) * 0.5 + 0.5;
+  return bounceOut(k * 2 - 1) * 0.5 + 0.5;
 };

package/src/phaser/core/tween_manager.ts

@@ -2,37 +2,37 @@ import type { Game } from './game.js';
 import { GROUP } from './const.js';
 import { Tween } from './tween.js';
 import {
-  BackIn,
-  BackInOut,
-  BackOut,
-  BounceIn,
-  BounceInOut,
-  BounceOut,
-  CircularIn,
-  CircularInOut,
-  CircularOut,
-  CubicIn,
-  CubicInOut,
-  CubicOut,
-  ElasticIn,
-  ElasticInOut,
-  ElasticOut,
-  ExponentialIn,
-  ExponentialInOut,
-  ExponentialOut,
-  LinearNone,
-  QuadraticIn,
-  QuadraticInOut,
-  QuadraticOut,
-  QuarticIn,
-  QuarticInOut,
-  QuarticOut,
-  QuinticIn,
-  QuinticInOut,
-  QuinticOut,
-  SinusoidalIn,
-  SinusoidalInOut,
-  SinusoidalOut,
+  backIn,
+  backInOut,
+  backOut,
+  bounceIn,
+  bounceInOut,
+  bounceOut,
+  circularIn,
+  circularInOut,
+  circularOut,
+  cubicIn,
+  cubicInOut,
+  cubicOut,
+  elasticIn,
+  elasticInOut,
+  elasticOut,
+  exponentialIn,
+  exponentialInOut,
+  exponentialOut,
+  linearNone,
+  quadraticIn,
+  quadraticInOut,
+  quadraticOut,
+  quarticIn,
+  quarticInOut,
+  quarticOut,
+  quinticIn,
+  quinticInOut,
+  quinticOut,
+  sinusoidalIn,
+  sinusoidalInOut,
+  sinusoidalOut,
 } from './tween_easing.js';
 
 /** What a tween can be attached to: any object, or a list of them. */
@@ -55,47 +55,47 @@ export class TweenManager {
     this._add = [];
     /** @type {{[key: string]: (k: number) => number}} */
     this.easeMap = {
-      Linear: LinearNone,
-      Quad: QuadraticOut,
-      Cubic: CubicOut,
-      Quart: QuarticOut,
-      Quint: QuinticOut,
-      Sine: SinusoidalOut,
-      Expo: ExponentialOut,
-      Circ: CircularOut,
-      Elastic: ElasticOut,
-      Back: BackOut,
-      Bounce: BounceOut,
-      'Quad.easeIn': QuadraticIn,
-      'Cubic.easeIn': CubicIn,
-      'Quart.easeIn': QuarticIn,
-      'Quint.easeIn': QuinticIn,
-      'Sine.easeIn': SinusoidalIn,
-      'Expo.easeIn': ExponentialIn,
-      'Circ.easeIn': CircularIn,
-      'Elastic.easeIn': ElasticIn,
-      'Back.easeIn': BackIn,
-      'Bounce.easeIn': BounceIn,
-      'Quad.easeOut': QuadraticOut,
-      'Cubic.easeOut': CubicOut,
-      'Quart.easeOut': QuarticOut,
-      'Quint.easeOut': QuinticOut,
-      'Sine.easeOut': SinusoidalOut,
-      'Expo.easeOut': ExponentialOut,
-      'Circ.easeOut': CircularOut,
-      'Elastic.easeOut': ElasticOut,
-      'Back.easeOut': BackOut,
-      'Bounce.easeOut': BounceOut,
-      'Quad.easeInOut': QuadraticInOut,
-      'Cubic.easeInOut': CubicInOut,
-      'Quart.easeInOut': QuarticInOut,
-      'Quint.easeInOut': QuinticInOut,
-      'Sine.easeInOut': SinusoidalInOut,
-      'Expo.easeInOut': ExponentialInOut,
-      'Circ.easeInOut': CircularInOut,
-      'Elastic.easeInOut': ElasticInOut,
-      'Back.easeInOut': BackInOut,
-      'Bounce.easeInOut': BounceInOut,
+      Linear: linearNone,
+      Quad: quadraticOut,
+      Cubic: cubicOut,
+      Quart: quarticOut,
+      Quint: quinticOut,
+      Sine: sinusoidalOut,
+      Expo: exponentialOut,
+      Circ: circularOut,
+      Elastic: elasticOut,
+      Back: backOut,
+      Bounce: bounceOut,
+      'Quad.easeIn': quadraticIn,
+      'Cubic.easeIn': cubicIn,
+      'Quart.easeIn': quarticIn,
+      'Quint.easeIn': quinticIn,
+      'Sine.easeIn': sinusoidalIn,
+      'Expo.easeIn': exponentialIn,
+      'Circ.easeIn': circularIn,
+      'Elastic.easeIn': elasticIn,
+      'Back.easeIn': backIn,
+      'Bounce.easeIn': bounceIn,
+      'Quad.easeOut': quadraticOut,
+      'Cubic.easeOut': cubicOut,
+      'Quart.easeOut': quarticOut,
+      'Quint.easeOut': quinticOut,
+      'Sine.easeOut': sinusoidalOut,
+      'Expo.easeOut': exponentialOut,
+      'Circ.easeOut': circularOut,
+      'Elastic.easeOut': elasticOut,
+      'Back.easeOut': backOut,
+      'Bounce.easeOut': bounceOut,
+      'Quad.easeInOut': quadraticInOut,
+      'Cubic.easeInOut': cubicInOut,
+      'Quart.easeInOut': quarticInOut,
+      'Quint.easeInOut': quinticInOut,
+      'Sine.easeInOut': sinusoidalInOut,
+      'Expo.easeInOut': exponentialInOut,
+      'Circ.easeInOut': circularInOut,
+      'Elastic.easeInOut': elasticInOut,
+      'Back.easeInOut': backInOut,
+      'Bounce.easeInOut': bounceInOut,
     };
 
     this.game.onPause.add(this._pauseAll, this);
@@ -140,12 +140,14 @@ export class TweenManager {
       }
       return;
     }
-    for (const tween of this._tweens.slice()) {
+    const running = [...this._tweens];
+    for (const tween of running) {
       if (obj === tween.target) {
         this.remove(tween);
       }
     }
-    for (const tween of this._add.slice()) {
+    const pending = [...this._add];
+    for (const tween of pending) {
       if (obj === tween.target) {
         this.remove(tween);
       }
@@ -210,7 +212,7 @@ export class TweenManager {
     }
     //  If there are any new tweens to be added, do so now - otherwise they can be spliced out of the array before ever running
     if (addTweens > 0) {
-      this._tweens = this._tweens.concat(this._add);
+      this._tweens = [...this._tweens, ...this._add];
       this._add.length = 0;
     }
     return true;

package/src/phaser/display/bitmap_text.ts

@@ -123,12 +123,12 @@ export class BitmapText extends DisplayObject {
       if (/(?:\r\n|\r|\n)/.test(text.charAt(i))) {
         return {
           width: w,
-          text: text.substr(0, i),
+          text: text.slice(0, i),
           end,
           chars,
         };
       }
-      let charCode = text.charCodeAt(i);
+      let charCode = text.codePointAt(i) ?? 32;
       let charData = data.chars[charCode];
       let c = 0;
       //  If the character data isn't found in the data array
@@ -154,7 +154,7 @@ export class BitmapText extends DisplayObject {
         //  The last space was at "lastSpace" which was "i - lastSpace" characters ago
         return {
           width: wrappedWidth || w,
-          text: text.substr(0, i - (i - lastSpace)),
+          text: text.slice(0, lastSpace),
           end,
           chars,
         };
@@ -189,11 +189,7 @@ export class BitmapText extends DisplayObject {
       const line = lines[i]!;
       let output = '';
       for (let c = 0; c < line.length; c += 1) {
-        if (data.chars[line.charCodeAt(c)]) {
-          output = output.concat(line[c]!);
-        } else {
-          output = output.concat(replace);
-        }
+        output = output.concat(data.chars[line.codePointAt(c) ?? 32] ? line[c]! : replace);
       }
       lines[i] = output;
     }
@@ -208,7 +204,7 @@ export class BitmapText extends DisplayObject {
     if (!data) {
       return;
     }
-    let text = this.text;
+    let { text } = this;
     const scale = this._fontSize / data.size;
     const lines: BitmapTextLine[] = [];
     let y = 0;
@@ -222,7 +218,7 @@ export class BitmapText extends DisplayObject {
       }
       y += data.lineHeight * scale;
       text = text.slice(line.text.length + 1);
-      end = line.end;
+      ({ end } = line);
     } while (!end);
     this.textHeight = y;
     let t = 0;
@@ -236,7 +232,7 @@ export class BitmapText extends DisplayObject {
         align = (this.textWidth - currentLine.width) / 2;
       }
       for (let c = 0; c < currentLine.text.length; c += 1) {
-        let charCode = currentLine.text.charCodeAt(c);
+        let charCode = currentLine.text.codePointAt(c) ?? 32;
         let charData = data.chars[charCode];
         if (charData === undefined) {
           charCode = 32;

package/src/phaser/display/button.ts

@@ -3,6 +3,7 @@ import { InputHandler } from '../core/input_handler.js';
 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';
 
 const STATE_OVER = 'Over';
 const STATE_OUT = 'Out';
@@ -45,8 +46,8 @@ export class Button extends Image {
     x = 0,
     y = 0,
     key: string | null = null,
-    callback: Function | null = null,
-    callbackContext: unknown | null = null,
+    callback: SignalListener | null = null,
+    callbackContext: unknown = null,
     overFrame: string | null = null,
     outFrame: string | null = null,
     downFrame: string | null = null,

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

@@ -48,13 +48,13 @@ export const renderGraphics = (graphics: Graphics, context: CanvasRenderingConte
     context.lineWidth = data.lineWidth;
     if (shape instanceof Polygon) {
       context.beginPath();
-      const { points } = shape;
-      context.moveTo(points[0], points[1]);
+      const points = shape.points as number[];
+      context.moveTo(points[0]!, points[1]!);
       for (let j = 1; j < points.length / 2; j += 1) {
-        context.lineTo(points[j * 2], points[j * 2 + 1]);
+        context.lineTo(points[j * 2]!, points[j * 2 + 1]!);
       }
       if (shape.closed) {
-        context.lineTo(points[0], points[1]);
+        context.lineTo(points[0]!, points[1]!);
       }
       // if the first and last point are the same close the path - much neater :)
       if (points[0] === points.at(-2) && points[1] === points.at(-1)) {
@@ -173,10 +173,10 @@ export const renderGraphicsMask = (graphics: Graphics, context: CanvasRenderingC
     const data = graphics.graphicsData[i]!;
     const { shape } = data;
     if (shape instanceof Polygon) {
-      const { points } = shape;
-      context.moveTo(points[0], points[1]);
+      const points = shape.points as number[];
+      context.moveTo(points[0]!, points[1]!);
       for (let j = 1; j < points.length / 2; j += 1) {
-        context.lineTo(points[j * 2], points[j * 2 + 1]);
+        context.lineTo(points[j * 2]!, points[j * 2 + 1]!);
       }
       // if the first and last point are the same close the path - much neater :)
       if (points[0] === points.at(-2) && points[1] === points.at(-1)) {

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

@@ -97,19 +97,18 @@ export const create = (parent: any, width?: any, height?: any, skipPool = false)
   }
   const idx = getFirst();
   const pool = getPool();
-  let canvas;
+  let entry;
   if (idx === -1 || skipPool) {
-    const container = {
+    entry = {
       parent,
       canvas: document.createElement('canvas'),
     };
-    pool.push(container);
-    canvas = container.canvas;
+    pool.push(entry);
   } else {
-    const entry = pool[idx]!;
+    entry = pool[idx]!;
     entry.parent = parent;
-    canvas = entry.canvas;
   }
+  const { canvas } = entry;
   if (width !== undefined) {
     canvas.width = width;
     canvas.height = height;

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

@@ -37,7 +37,7 @@ export class CanvasRenderer {
   public contextLost!: any;
   public width!: number;
   public height!: number;
-  public view!: any;
+  public view!: HTMLCanvasElement;
   public context!: CanvasRenderingContext2D;
   public refresh!: any;
   public count!: any;
@@ -59,7 +59,10 @@ export class CanvasRenderer {
     this.height = game.height * this.resolution;
     this.view = game.canvas;
     /** @type {CanvasRenderingContext2D} */
-    this.context = this.view.getContext('2d', { willReadFrequently: false, alpha: this.transparent });
+    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);
     }
@@ -107,8 +110,8 @@ export class CanvasRenderer {
    * @param {boolean} removeView - Whether to remove the view from the DOM.
    */
   public destroy(removeView = true): void {
-    if (removeView && this.view.parent) {
-      this.view.parent.removeChild(this.view);
+    if (removeView) {
+      this.view.remove();
     }
   }
 

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

@@ -14,7 +14,8 @@ import type { Image } from '../image.js';
  */
 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);
+  const tint = globalThis.PhaserRegistry.CANVAS_TINT_METHOD;
+  tint(sprite.texture, color, canvas);
   return canvas;
 };
 
@@ -91,22 +92,19 @@ export const tintWithPerPixel = (texture: Texture, color: number, canvas: HTMLCa
     crop.width,
     crop.height
   );
-  const rgbValues = hex2rgb(color);
-  const r = rgbValues[0];
-  const g = rgbValues[1];
-  const b = rgbValues[2];
+  const [r, g, b] = hex2rgb(color);
   const pixelData = context.getImageData(0, 0, crop.width, crop.height);
   const pixels = pixelData.data;
   for (let i = 0; i < pixels.length; i += 4) {
-    pixels[i + 0] = pixels[i + 0]! * r;
-    pixels[i + 1] = pixels[i + 1]! * g;
-    pixels[i + 2] = pixels[i + 2]! * b;
+    pixels[i + 0]! *= r;
+    pixels[i + 1]! *= g;
+    pixels[i + 2]! *= b;
     const canHandleAlpha = globalThis.PhaserRegistry.CAN_CANVAS_HANDLE_ALPHA;
     if (!canHandleAlpha) {
       const alpha = pixels[i + 3]!;
-      pixels[i + 0] = pixels[i + 0]! / (255 / alpha);
-      pixels[i + 1] = pixels[i + 1]! / (255 / alpha);
-      pixels[i + 2] = pixels[i + 2]! / (255 / alpha);
+      pixels[i + 0]! /= 255 / alpha;
+      pixels[i + 1]! /= 255 / alpha;
+      pixels[i + 2]! /= 255 / alpha;
     }
   }
   context.putImageData(pixelData, 0, 0);