How WebGL Boosted Our Canvas Editor’s Performance and Cut Memory Use

Business Introduction

Banma, a community for anime‑related interests, offers a face‑customization app called Dimensional Show where users can create and save original anime characters.

Technical Challenges

The editor page, the core of Dimensional Show, contains over 20 pages and must support layered image composition, color blending, and exporting of both the full preview and individual layers.

Initially the editor was built with Konva.js on a Canvas 2D context. The rendering pipeline involved drawing each asset with CanvasRenderingContext2D.drawImage(), extracting pixel data via CanvasRenderingContext2D.getImageData(), applying per‑pixel filter calculations, and writing the result back with CanvasRenderingContext2D.putImageData(). After processing all assets, the intermediate canvas was copied to the screen canvas, and each layer could be exported as a separate canvas or image.

During testing on mobile devices, repeated random operations or rapid mode switches caused canvas distortion or blank pages, forcing the app to be killed.

Root Cause Analysis

Performance profiling revealed JavaScript memory usage reaching several hundred megabytes. The main reasons were high‑resolution images and the need to keep pixel data for each asset (often 20+ per mode) in memory, leading to memory overflow.

Two hidden costs of Canvas 2D were identified:

Retaining pixel data for many assets consumes excessive memory.

Per‑pixel filter calculations run on the CPU; a 750×750 image requires about 560,000 operations, and with dozens of assets the CPU load becomes substantial.

Solution

Switch to WebGL, which provides a GPU‑accelerated rendering context, to reduce both memory and CPU consumption.

What is WebGL?

WebGL is a graphics API that enables high‑performance 2D/3D rendering in the browser. It works through an HTML Canvas element obtained via HTMLCanvasElement.getContext() and uses GLSL ES shaders for vertex and fragment processing.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

Advantages of WebGL

GPU parallelism allows thousands of small cores to compute pixel colors simultaneously, dramatically lowering CPU usage compared to sequential Canvas 2D calculations.

Implementing WebGL in the Editor

Multiple Transparent Image Layers

Character composition uses several images with alpha channels stacked in order. WebGL’s default blending overwrites the destination color, so enabling blending with gl.blendFunc() allows proper compositing of semi‑transparent layers.

Color Blending (Tinting)

To apply arbitrary colors to images, the same blending formula is used in the fragment shader. The source factor is the source alpha, and the destination factor is one minus the source alpha.

void main() {
  vec4 texColor = texture2D(u_texture, v_textureCoord);
  float alphaMinus = 1.0 - v_rgba.a;
  float blend_r = v_rgba.r * v_rgba.a + texColor.r * alphaMinus;
  float blend_g = v_rgba.g * v_rgba.a + texColor.g * alphaMinus;
  float blend_b = v_rgba.b * v_rgba.a + texColor.b * alphaMinus;
  gl_FragColor = vec4(blend_r, blend_g, blend_b, texColor.a);
}

Off‑Screen Rendering

To avoid flickering when drawing many layers, images are first rendered to an off‑screen framebuffer. Once all layers are composed, the framebuffer’s texture is drawn to the visible canvas.

Data Validation

Benchmarking showed that the WebGL version reduced CPU load by 30%‑83%, image memory usage by 78%‑83%, and JavaScript memory consumption by 60%‑77% compared with the Canvas 2D implementation.