fallback in case of CanvasRenderer

front/src/Components/Woka/Woka.svelte

@@ -10,8 +10,8 @@ import { onDestroy } from 'svelte';
     const playerWokaPictureStore = gameScene.getUserWokaPictureStore(userId);
 
     let src = placeholderSrc;
-    const unsubscribe = playerWokaPictureStore.picture.subscribe((htmlElement) => {
-        src = htmlElement?.src ?? placeholderSrc;
+    const unsubscribe = playerWokaPictureStore.picture.subscribe((source) => {
+        src = source ?? placeholderSrc;
     });
 
     onDestroy(unsubscribe);

front/src/Phaser/Entity/Character.ts

@@ -10,7 +10,7 @@ import type { GameScene } from "../Game/GameScene";
 import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
 import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
 import { isSilentStore } from "../../Stores/MediaStore";
-import { lazyLoadPlayerCharacterTextures } from "./PlayerTexturesLoadingManager";
+import { lazyLoadPlayerCharacterTextures, loadAllDefaultModels } from "./PlayerTexturesLoadingManager";
 
 const playerNameY = -25;
 
@@ -117,17 +117,26 @@ export abstract class Character extends Container {
         }
     }
 
-    public async getSnapshot(): Promise<HTMLImageElement> {
+    public async getSnapshot(): Promise<string> {
         const rt = this.scene.make.renderTexture({}, false);
+        if (rt.renderer instanceof Phaser.Renderer.Canvas.CanvasRenderer) {
+            rt.destroy();
+            for (const sprite of this.sprites.values()) {
+                // we can be sure that either predefined woka or body texture is at this point loaded
+                if (sprite.texture.key.includes("color") || sprite.texture.key.includes("male")) {
+                    return this.scene.textures.getBase64(sprite.texture.key);
+                }
+            }
+        }
         for (const sprite of this.sprites.values()) {
             sprite.setFrame(1);
             rt.draw(sprite, sprite.displayWidth * 0.5, sprite.displayHeight * 0.5);
         }
-        return new Promise<HTMLImageElement>((resolve, reject) => {
+        return new Promise<string>((resolve, reject) => {
             try {
                 rt.snapshot(
                     (url) => {
-                        resolve(url as HTMLImageElement);
+                        resolve((url as HTMLImageElement).src);
                         rt.destroy();
                     },
                     "image/png",

front/src/Phaser/Game/GameScene.ts

@@ -1535,8 +1535,8 @@ ${escapedMessage}
     }
 
     private async savePlayerWokaPicture(character: Character, userId: number): Promise<void> {
-        const htmlImageElement = await character.getSnapshot();
-        this.getUserWokaPictureStore(userId).picture.set(htmlImageElement);
+        const htmlImageElementSrc = await character.getSnapshot();
+        this.getUserWokaPictureStore(userId).picture.set(htmlImageElementSrc);
     }
 
     pushPlayerPosition(event: HasPlayerMovedEvent) {

front/src/Stores/UserWokaPictureStore.ts

@@ -4,5 +4,5 @@ import { writable, Writable } from "svelte/store";
  * A store that contains the player avatar picture
  */
 export class UserWokaPictureStore {
-    constructor(public picture: Writable<HTMLImageElement | undefined> = writable(undefined)) {}
+    constructor(public picture: Writable<string | undefined> = writable(undefined)) {}
 }