Implementation and Optimization of Lasso Transformations in HTML Canvas for Web‑Based Whiteboard

The background describes how traditional blackboard‑and‑chalk teaching has evolved into digital whiteboards where teachers draw on tablets, and how the lasso tool became a core feature for batch editing graphics in the Xueersi online classroom.

It introduces the HTML Canvas element and its CanvasRenderingContext2D (referred to as ctx ) API, covering essential methods such as ctx.translate(x,y) , ctx.rotate(radius) , and ctx.scale(sx,sy) that are used throughout the implementation.

The rotation‑scaling principle explains that Canvas transformations are origin‑centric, so to rotate or scale around the lasso’s center the canvas is first translated to align the lasso center with the canvas origin, then the desired transformation is applied, and finally the inverse translation restores the original coordinate system.

For multiple lasso operations, the article shows that each lasso consists of five basic transformations; therefore, two consecutive lasso actions require ten operations, which can be combined into a single matrix multiplication to reduce the number of Canvas calls.

Because Canvas drawing is destructive, the system records each shape’s transformation state in an array. After clearing the canvas, shapes are redrawn by iterating over their stored state arrays, while new lasso actions simply append new records.

Undo/redo functionality is implemented using a doubly‑linked list (or stack) that stores lasso records; moving a pointer to the previous or next node restores the corresponding transformation state.

Performance experiments compare the original implementation with the optimized version, showing average rendering time reductions of 64.65% and 90.18% for two test scenarios involving 50 and 25 long doodles with multiple lasso operations.

The optimization strategy compresses a shape’s entire transformation history into a single matrix by pre‑computing the combined effect of all operations, thus reducing the per‑frame Canvas workload to three basic calls (translate, rotate/scale, translate back).

Matrix theory is introduced, explaining how translation, rotation, and scaling can each be expressed as a 3×3 transformation matrix, and how multiplying these matrices yields a single matrix that encapsulates the complete transformation.

Finally, the article summarizes that a lasso operation consists of (1) translating the canvas to the lasso center, (2) applying the lasso’s translation, (3) applying rotation and scaling, (4) translating back, and that all such operations can be represented and combined using 3×3 matrices for efficient rendering.