Wasm多线程渲染场景下，transferControlToOffscreen()后能否调整Canvas大小？

核心原理 #

调用transferControlToOffscreen()后，原<canvas>元素的控制权完全移交到对应的OffscreenCanvas实例，因此不能再修改原canvas的width/height属性，但OffscreenCanvas本身允许在Worker线程中调整尺寸，同时可以通过CSS控制原canvas的视觉显示大小。

方案一：Worker内调整OffscreenCanvas尺寸（推荐） #

步骤： #

1. UI线程（宿主JS）：

   • 只修改原canvas的CSS样式来调整视觉大小，不要触碰width/height属性：

     const canvas = document.getElementById('canvas');
     // 调整视觉显示大小（比如适配窗口）
     canvas.style.width = '640px';
     canvas.style.height = '360px';
     // 给Worker发送新的逻辑渲染尺寸（可根据设备像素比调整，比如2倍高清）
     const logicalWidth = 640 * window.devicePixelRatio;
     const logicalHeight = 360 * window.devicePixelRatio;
     worker.postMessage({ type: 'resize', width: logicalWidth, height: logicalHeight });
     

2. Worker线程（Wasm/C++）：

   • 监听UI线程的resize消息，调整OffscreenCanvas的尺寸并重建渲染资源：
     • 在C++中，通过Emscripten的消息回调接收尺寸：

       #include <emscripten.h>
       #include <emscripten/html5.h>
       
       EMSCRIPTEN_WEBGL_CONTEXT_HANDLE glContext;
       OffscreenCanvas* offscreenCanvas; // 保存转移过来的OffscreenCanvas指针
       
       void handleResizeMessage(int eventType, const void* data, void* userData) {
         const auto& msg = static_cast<const EM_JS_MESSAGE*>(data);
         if (strcmp(msg->type, "resize") == 0) {
           int width = msg->data["width"].asInt();
           int height = msg->data["height"].asInt();
       
           // 暂停渲染循环
           emscripten_pause_main_loop();
       
           // 调整OffscreenCanvas尺寸
           EM_ASM({
             const offscreenCanvas = $0;
             offscreenCanvas.width = $1;
             offscreenCanvas.height = $2;
           }, offscreenCanvas, width, height);
       
           // 重建WebGL视口和相关渲染资源（帧缓冲、纹理等）
           glViewport(0, 0, width, height);
           // 这里添加销毁旧资源、创建新尺寸资源的代码
       
           // 恢复渲染循环
           emscripten_resume_main_loop();
         }
       }
       
       // 初始化时注册消息回调
       emscripten_set_message_callback("resize", nullptr, handleResizeMessage);
       

方案二：重新创建OffscreenCanvas并移交控制权 #

如果需要彻底替换渲染目标（比如某些特殊场景），可以在UI线程创建新的OffscreenCanvas，再传递给Worker：

1. UI线程：

   const canvas = document.getElementById('canvas');
   // 创建新的OffscreenCanvas
   const newOffscreen = new OffscreenCanvas(640, 360);
   // 给Worker发送新的OffscreenCanvas（注意用Transferable传递）
   worker.postMessage({ type: 'newCanvas', canvas: newOffscreen }, [newOffscreen]);
   // 调整原canvas的CSS样式匹配新尺寸
   canvas.style.width = '640px';
   canvas.style.height = '360px';
   

2. Worker线程：
   接收新的OffscreenCanvas，销毁旧的渲染上下文，用新canvas重新初始化WebGL环境。

关键注意事项 #

• 区分逻辑尺寸（OffscreenCanvas的width/height，决定渲染分辨率）和视觉尺寸（原canvas的CSS width/height，决定显示大小），可以通过设备像素比实现高清渲染。
• 调整尺寸时必须暂停渲染循环，避免资源销毁与渲染操作的竞态条件。
• 所有DOM操作必须在UI线程完成，Worker线程仅负责渲染逻辑和OffscreenCanvas的尺寸调整。

内容的提问来源于stack exchange，提问作者Michael IV