Repository: 4ian/GDevelop
File: GDJS/Runtime/pixi-renderers/runtimegame-pixi-renderer.ts (TypeScript)

Code before:

      // Handle scale mode.
      if (this._game.getScaleMode() === 'nearest') {
        gameCanvas.style['image-rendering'] = '-moz-crisp-edges';
        gameCanvas.style['image-rendering'] = '-webkit-optimize-contrast';
        gameCanvas.style['image-rendering'] = '-webkit-crisp-edges';
        gameCanvas.style['image-rendering'] = 'pixelated';
      }

      // Handle pixels rounding.
      if (this._game.getPixelsRounding()) {
        PIXI.settings.ROUND_PIXELS = true;
      }

      // Handle resize: immediately adjust the game canvas (and dom element container)
      // and notify the game (that may want to adjust to the new size of the window).
      window.addEventListener('resize', () => {
        this._game.onWindowInnerSizeChanged();
        this._resizeCanvas();
      });

      // Focus the canvas when created.
      gameCanvas.focus();
    }

    useCanvas(gameCanvas: HTMLCanvasElement): void {
      if (typeof THREE !== "undefined") {
        this._threeRenderer = new THREE.WebGLRenderer({
          canvas: gameCanvas,
          antialias:
              this._game.getAntialiasingMode() !== "none" &&
              (this._game.isAntialisingEnabledOnMobile() || !gdjs.evtTools.common.isMobile()),
          preserveDrawingBuffer: true, // Keep to true to allow screenshots.
        });
        this._threeRenderer.useLegacyLights = true;
        this._threeRenderer.autoClear = false;
        this._threeRenderer.setSize(this._game.getGameResolutionWidth(), this._game.getGameResolutionHeight());

        // Create a PixiJS renderer that use the same GL context as Three.js
        // so that both can render to the canvas and even have PixiJS rendering
        // reused in Three.js (by using a RenderTexture and the same internal WebGL texture).
        this._pixiRenderer = new PIXI.Renderer({
          width: this._game.getGameResolutionWidth(),
          height: this._game.getGameResolutionHeight(),
          view: gameCanvas,
          // @ts-ignore - reuse the context from Three.js.
          context: this._threeRenderer.getContext(),
          clearBeforeRender: false,
          preserveDrawingBuffer: true, // Keep to true to allow screenshots.
          antialias: false,
          backgroundAlpha: 0,

Review comment (suggestion):
There is a lot of copy from the `createStandardCanvas` function. Could you rework `createStandardCanvas` so that it's using `useCanvas` under the hood?

Also, the name is probably not showing this is an important operation enough, that just can't be redone a second time. So I think it should be called `initializeForCanvas`

Code after:

      // Prevent magnifying glass on iOS with a long press.
      // Note that there are related bugs on iOS 15 (see https://bugs.webkit.org/show_bug.cgi?id=231161)
      // but it seems not to affect us as the `domElementsContainer` has `pointerEvents` set to `none`.
      domElementsContainer.style['-webkit-user-select'] = 'none';

      gameCanvas.parentNode?.appendChild(domElementsContainer);
      this._domElementsContainer = domElementsContainer;

      this._resizeCanvas();

      // Handle scale mode.
      if (this._game.getScaleMode() === 'nearest') {
        gameCanvas.style['image-rendering'] = '-moz-crisp-edges';
        gameCanvas.style['image-rendering'] = '-webkit-optimize-contrast';
        gameCanvas.style['image-rendering'] = '-webkit-crisp-edges';
        gameCanvas.style['image-rendering'] = 'pixelated';
      }

      // Handle pixels rounding.
      if (this._game.getPixelsRounding()) {
        PIXI.settings.ROUND_PIXELS = true;
      }

      // Handle resize: immediately adjust the game canvas (and dom element container)
      // and notify the game (that may want to adjust to the new size of the window).
      window.addEventListener('resize', () => {
        this._game.onWindowInnerSizeChanged();
        this._resizeCanvas();
      });

      // Focus the canvas when created.
      gameCanvas.focus();
    }

    static getWindowInnerWidth() {
      return typeof window !== 'undefined' ? window.innerWidth : 800;
    }

    static getWindowInnerHeight() {
      return typeof window !== 'undefined' ? window.innerHeight : 800;
    }

    /**
     * Update the game renderer size according to the "game resolution".
     * Called when game resolution changes.
     *
     * Note that if the canvas is fullscreen, it won't be resized, but when going back to
     * non fullscreen mode, the requested size will be used.
     */
    updateRendererSize(): void {