FE Development: Improving Web Photo Editor 'Photos' Performance with OffscreenCanvas

The web photo editor 'Photos', developed by the FE Platform Team, is used in platforms such as Daum Cafe and Tistory. Performance issues caused by main thread load during high-resolution image processing were raised. To address this, we investigated and applied a solution that separates canvas logic into a Worker thread using the OffscreenCanvas Web API.

Through a demo page comparing Canvas Animation and WebGL Image Filter, we verified that when the main thread was artificially blocked, standard Canvas animations stopped, but OffscreenCanvas continued to operate smoothly without interruption in the Worker thread. Additionally, we confirmed via the Performance tab that functions executed without being affected by main thread blocking during WebGL filtering.

Several issues arose during the implementation process. First, creating a Worker and passing the OffscreenCanvas on every filter change resulted in a 'detached' error. This was resolved by modifying the code to avoid reassigning the OffscreenCanvas after creation and not sending the canvas via postMessage. Second, since OffscreenCanvas lacks width and height properties, using canvas.style in existing code caused errors, requiring explicit definitions. Finally, because the DOM Image API is unavailable in Worker threads, we changed the approach to generate image bitmaps using the fetch API and createImageBitmap.

Currently, Chrome and Edge are supported, while Firefox support is under development. Safari and IE are not supported, necessitating conditional branching. OffscreenCanvas is highly reusable with existing canvas code and has a low learning curve, making it an effective alternative for reducing main thread load in canvas-based services.