@kurot/core 1.0.13 → 1.0.15

package/dist/kurot/player/canvas/CanvasRenderer.js

@@ -11,7 +11,7 @@ import { TextFieldType } from '../../text/enums/TextFieldType.js';
 import { getFontString } from '../../text/TextMeasurer.js';
 import { CanvasBuffer, hitTestBuffer } from './CanvasBuffer.js';
 const CAPS_MAP = { none: 'butt', square: 'square', round: 'round' };
-/** Convert a 0xRRGGBB color number to a CSS rgb() string. */
+const CANVAS_BLUR_RADIUS_SCALE = 0.25;
 function colorToString(color) {
     const r = (color >> 16) & 0xff;
     const g = (color >> 8) & 0xff;
@@ -19,30 +19,22 @@ function colorToString(color) {
     return `rgb(${r},${g},${b})`;
 }
 /**
- * Canvas 2D renderer. Traverses the DisplayObject tree and draws each node
- * using the Canvas 2D API. Equivalent to Egret's `CanvasRenderer`.
- *
- * Performance notes:
- * - Currently does full-tree traversal and full-canvas redraw every frame.
- *   Egret used a DisplayList with dirty-region tracking to only redraw changed areas.
- *   This should be added when performance becomes a concern.
- * - Egret used a RenderNode intermediate layer (BitmapNode, GraphicsNode, etc.)
- *   to cache rendering instructions. Kurot reads DisplayObject data directly,
- *   which is simpler but skips the caching benefit. If profiling shows the JS-side
- *   traversal is a bottleneck, consider adding a lightweight render command cache.
- * - For high-performance scenarios, a WebGL renderer with batch rendering should
- *   be implemented as an alternative backend.
+ * Traverses a display-object tree and renders it with Canvas 2D.
  */
 export class CanvasRenderer {
     // ── Instance fields ───────────────────────────────────────────────────────
     _hasFill = false;
     _hasStroke = false;
+    _bitmapTintCache = new WeakMap();
+    _graphicsTintCache = new WeakMap();
+    _globalTint = 0xffffff;
     // ── Public methods ────────────────────────────────────────────────────────
     /**
      * Renders a display object tree into the given buffer.
      */
     render(displayObject, buffer, matrix) {
         const ctx = buffer.context;
+        this._globalTint = 0xffffff;
         if (matrix) {
             ctx.save();
             ctx.transform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.tx, matrix.ty);
@@ -52,26 +44,21 @@ export class CanvasRenderer {
             ctx.restore();
         return drawCalls;
     }
-    /** @internal Used by WebGLRenderer for offscreen DisplayList rendering. */
     renderToContext(displayObject, ctx, offsetX, offsetY) {
         this.drawDisplayObject(displayObject, ctx, offsetX, offsetY, true);
     }
-    /** @internal Used by WebGLRenderer to rasterize a Graphics object into a Canvas 2D context. */
     renderGraphicsToContext(graphics, ctx, offsetX, offsetY, forHitTest = false, skipCache = false) {
         this.renderGraphics(graphics, ctx, offsetX, offsetY, forHitTest, skipCache);
     }
-    /** @internal Used by WebGL TextPipe to rasterize a TextField into a Canvas 2D context. */
     renderTextFieldToContext(tf, ctx, offsetX, offsetY) {
         this.renderTextField(tf, ctx, offsetX, offsetY);
     }
-    /** @internal Used by Bitmap pixel hit test. */
     renderBitmapToContext(bitmap, ctx, offsetX, offsetY) {
         this.renderBitmap(bitmap, ctx, offsetX, offsetY);
     }
     // ── Private: tree traversal ───────────────────────────────────────────────
     drawDisplayObject(displayObject, ctx, offsetX, offsetY, _isStage = false) {
         let drawCalls = 0;
-        // DisplayList cache (cacheAsBitmap)
         const $displayList = displayObject.$displayList;
         if ($displayList && !_isStage) {
             if (displayObject.$cacheDirty || displayObject.$renderDirty) {
@@ -85,7 +72,6 @@ export class CanvasRenderer {
                 displayObject.$cacheDirty = false;
                 displayObject.$renderDirty = false;
             }
-            // Draw cached result and skip $children
             if ($displayList.bitmapData?.source) {
                 const resolution = $displayList.actualResolution;
                 const previousSmoothing = ctx.imageSmoothingEnabled;
@@ -96,9 +82,7 @@ export class CanvasRenderer {
             }
             return drawCalls;
         }
-        // Draw self
         drawCalls += this.renderSelf(displayObject, ctx, offsetX, offsetY);
-        // Draw $children
         const $children = displayObject.$children;
         if (!$children)
             return drawCalls;
@@ -106,6 +90,10 @@ export class CanvasRenderer {
             const child = $children[i];
             if (child.$renderMode === 1 /* RenderMode.NONE */)
                 continue;
+            const previousTint = this._globalTint;
+            if (child.$tintRGB !== 0xffffff) {
+                this._globalTint = child.tint;
+            }
             let childOffsetX;
             let childOffsetY;
             if (child.$useTranslate) {
@@ -144,6 +132,7 @@ export class CanvasRenderer {
             else if (prevAlpha !== undefined) {
                 ctx.globalAlpha = prevAlpha;
             }
+            this._globalTint = previousTint;
         }
         return drawCalls;
     }
@@ -170,15 +159,11 @@ export class CanvasRenderer {
         const bounds = displayObject.$getOriginalBounds();
         if (bounds.width <= 0 || bounds.height <= 0)
             return 0;
-        // Build CSS filter string for GPU-accelerated filters.
-        // ColorMatrixFilter cannot be expressed as a CSS filter string (arbitrary matrix),
-        // so it falls back to the CPU pixel path below.
         const cssFilters = [];
         let hasCpuFilter = false;
         for (const filter of filters) {
             if (filter instanceof BlurFilter) {
-                // Average blurX/blurY — CSS blur is isotropic.
-                const radius = (filter.blurX + filter.blurY) / 2;
+                const radius = ((filter.blurX + filter.blurY) / 2) * CANVAS_BLUR_RADIUS_SCALE;
                 if (radius > 0)
                     cssFilters.push(`blur(${radius}px)`);
             }
@@ -194,7 +179,6 @@ export class CanvasRenderer {
                 cssFilters.push(`drop-shadow(${dx}px ${dy}px ${blur}px rgba(${r},${g},${b},${a / 255}))`);
             }
             else if (filter instanceof GlowFilter) {
-                // Approximate glow as a zero-offset drop-shadow.
                 const blur = (filter.blurX + filter.blurY) / 2;
                 const r = (filter.color >> 16) & 0xff;
                 const g = (filter.color >> 8) & 0xff;
@@ -231,7 +215,6 @@ export class CanvasRenderer {
         const bufferH = Math.ceil(bounds.height);
         const offscreen = new CanvasBuffer(bufferW, bufferH);
         const offCtx = offscreen.context;
-        // Apply CSS-capable filters on the offscreen context before drawing.
         if (cssFilters.length > 0)
             offCtx.filter = cssFilters.join(' ');
         let drawCalls = 0;
@@ -249,7 +232,6 @@ export class CanvasRenderer {
             return 0;
         }
         offCtx.filter = 'none';
-        // Apply CPU-only filters (ColorMatrixFilter).
         const imageData = offCtx.getImageData(0, 0, offscreen.width, offscreen.height);
         const data = imageData.data;
         for (const filter of filters) {
@@ -279,8 +261,6 @@ export class CanvasRenderer {
             ctx.rect(scrollRect.x + offsetX, scrollRect.y + offsetY, scrollRect.width, scrollRect.height);
             ctx.clip();
         }
-        // DisplayObject mask: render content and mask to offscreen buffers,
-        // composite with 'destination-in' to produce the masked result.
         if (mask) {
             const bounds = displayObject.$getOriginalBounds();
             if (bounds.width <= 0 || bounds.height <= 0) {
@@ -294,15 +274,12 @@ export class CanvasRenderer {
             const bh = Math.ceil(bounds.height);
             const bx = bounds.x;
             const by = bounds.y;
-            // Render content to offscreen buffer
             const contentBuffer = new CanvasBuffer(bw, bh);
             const contentCtx = contentBuffer.context;
             const drawCalls = this.drawDisplayObject(displayObject, contentCtx, -bx, -by);
-            // Render mask shape to the same buffer using destination-in
             contentCtx.globalCompositeOperation = 'destination-in';
             const maskMatrix = mask.$getConcatenatedMatrix();
             const parentMatrix = displayObject.$getConcatenatedMatrix();
-            // Transform mask relative to the content's local space
             contentCtx.save();
             const invA = parentMatrix.a, invB = parentMatrix.b, invC = parentMatrix.c, invD = parentMatrix.d;
             const invTx = parentMatrix.tx, invTy = parentMatrix.ty;
@@ -311,7 +288,6 @@ export class CanvasRenderer {
                 const ia = invD / det, ib = -invB / det, ic = -invC / det, id = invA / det;
                 const itx = (invC * invTy - invD * invTx) / det;
                 const ity = (invB * invTx - invA * invTy) / det;
-                // Combine: inverse(parent) * mask
                 const ra = ia * maskMatrix.a + ic * maskMatrix.b;
                 const rb = ib * maskMatrix.a + id * maskMatrix.b;
                 const rc = ia * maskMatrix.c + ic * maskMatrix.d;
@@ -326,7 +302,6 @@ export class CanvasRenderer {
             this.drawDisplayObject(mask, contentCtx, 0, 0);
             contentCtx.restore();
             contentCtx.globalCompositeOperation = 'source-over';
-            // Draw the masked result onto the main context
             ctx.drawImage(contentBuffer.surface, offsetX + bx, offsetY + by);
             contentBuffer.destroy();
             if (scrollRect)
@@ -363,13 +338,31 @@ export class CanvasRenderer {
     }
     renderMesh(mesh, ctx, offsetX, offsetY) {
         const bd = mesh.bitmapData;
-        if (!bd?.source || mesh.vertices.length === 0)
+        if (!bd?.source || mesh.vertices.length === 0 || mesh.uvs.length !== mesh.vertices.length)
             return 0;
-        // Canvas 2D doesn't natively support mesh rendering.
-        // Fall back to drawing the full texture as a simple bitmap.
-        const destW = !isNaN(mesh.width) ? mesh.width : mesh.textureWidth;
-        const destH = !isNaN(mesh.height) ? mesh.height : mesh.textureHeight;
-        ctx.drawImage(bd.source, mesh.bitmapX, mesh.bitmapY, mesh.bitmapWidth, mesh.bitmapHeight, offsetX + mesh.bitmapOffsetX, offsetY + mesh.bitmapOffsetY, destW, destH);
+        const tinted = this._globalTint !== 0xffffff;
+        const source = tinted
+            ? this.getTintedBitmapSource(mesh, this._globalTint)
+            : bd.source;
+        const sourceX = tinted ? 0 : mesh.bitmapX;
+        const sourceY = tinted ? 0 : mesh.bitmapY;
+        const sourceWidth = mesh.bitmapWidth;
+        const sourceHeight = mesh.bitmapHeight;
+        ctx.imageSmoothingEnabled = mesh.smoothing;
+        for (let i = 0; i + 2 < mesh.indices.length; i += 3) {
+            const i0 = mesh.indices[i];
+            const i1 = mesh.indices[i + 1];
+            const i2 = mesh.indices[i + 2];
+            if (i0 < 0 ||
+                i1 < 0 ||
+                i2 < 0 ||
+                i0 * 2 + 1 >= mesh.vertices.length ||
+                i1 * 2 + 1 >= mesh.vertices.length ||
+                i2 * 2 + 1 >= mesh.vertices.length) {
+                continue;
+            }
+            this.drawTexturedTriangle(ctx, source, sourceX, sourceY, sourceWidth, sourceHeight, mesh.vertices, mesh.uvs, i0, i1, i2, offsetX + mesh.bitmapOffsetX, offsetY + mesh.bitmapOffsetY);
+        }
         return 1;
     }
     renderBitmap(bitmap, ctx, offsetX, offsetY) {
@@ -381,21 +374,157 @@ export class CanvasRenderer {
         if (destW <= 0 || destH <= 0)
             return 0;
         ctx.imageSmoothingEnabled = bitmap.smoothing;
-        ctx.drawImage(bd.source, bitmap.bitmapX, bitmap.bitmapY, bitmap.bitmapWidth, bitmap.bitmapHeight, offsetX + bitmap.bitmapOffsetX, offsetY + bitmap.bitmapOffsetY, destW, destH);
+        if (this._globalTint === 0xffffff) {
+            ctx.drawImage(bd.source, bitmap.bitmapX, bitmap.bitmapY, bitmap.bitmapWidth, bitmap.bitmapHeight, offsetX + bitmap.bitmapOffsetX, offsetY + bitmap.bitmapOffsetY, destW, destH);
+        }
+        else {
+            ctx.drawImage(this.getTintedBitmapSource(bitmap, this._globalTint), offsetX + bitmap.bitmapOffsetX, offsetY + bitmap.bitmapOffsetY, destW, destH);
+        }
         return 1;
     }
+    getTintedBitmapSource(bitmap, tint) {
+        const bitmapData = bitmap.bitmapData;
+        let cache = this._bitmapTintCache.get(bitmap);
+        const needsUpdate = !cache ||
+            cache.tint !== tint ||
+            cache.contentVersion !== bitmapData.contentVersion ||
+            cache.sourceX !== bitmap.bitmapX ||
+            cache.sourceY !== bitmap.bitmapY ||
+            cache.sourceWidth !== bitmap.bitmapWidth ||
+            cache.sourceHeight !== bitmap.bitmapHeight;
+        if (!cache) {
+            cache = this.createTintedCanvasCache();
+            this._bitmapTintCache.set(bitmap, cache);
+        }
+        if (needsUpdate) {
+            this.updateTintedCanvas(cache, bitmapData.source, bitmap.bitmapX, bitmap.bitmapY, bitmap.bitmapWidth, bitmap.bitmapHeight, tint, bitmapData.contentVersion);
+        }
+        return cache.buffer.surface;
+    }
+    getTintedGraphicsSource(graphics, tint, sourceChanged) {
+        const source = graphics.offscreenCanvas;
+        let cache = this._graphicsTintCache.get(graphics);
+        const needsUpdate = sourceChanged ||
+            !cache ||
+            cache.tint !== tint ||
+            cache.sourceWidth !== source.width ||
+            cache.sourceHeight !== source.height;
+        if (!cache) {
+            cache = this.createTintedCanvasCache();
+            this._graphicsTintCache.set(graphics, cache);
+        }
+        if (needsUpdate) {
+            this.updateTintedCanvas(cache, source, 0, 0, source.width, source.height, tint, cache.contentVersion + 1);
+        }
+        return cache.buffer.surface;
+    }
+    createTintedCanvasCache() {
+        return {
+            buffer: new CanvasBuffer(),
+            tint: 0xffffff,
+            contentVersion: -1,
+            sourceX: 0,
+            sourceY: 0,
+            sourceWidth: 0,
+            sourceHeight: 0,
+        };
+    }
+    updateTintedCanvas(cache, source, sourceX, sourceY, sourceWidth, sourceHeight, tint, contentVersion) {
+        const width = Math.max(1, Math.ceil(sourceWidth));
+        const height = Math.max(1, Math.ceil(sourceHeight));
+        if (cache.buffer.width !== width || cache.buffer.height !== height) {
+            cache.buffer.resize(width, height);
+        }
+        else {
+            cache.buffer.clear();
+        }
+        const context = cache.buffer.context;
+        context.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, width, height);
+        context.globalCompositeOperation = 'multiply';
+        context.fillStyle = colorToString(tint);
+        context.fillRect(0, 0, width, height);
+        context.globalCompositeOperation = 'destination-in';
+        context.drawImage(source, sourceX, sourceY, sourceWidth, sourceHeight, 0, 0, width, height);
+        context.globalCompositeOperation = 'source-over';
+        cache.tint = tint;
+        cache.contentVersion = contentVersion;
+        cache.sourceX = sourceX;
+        cache.sourceY = sourceY;
+        cache.sourceWidth = sourceWidth;
+        cache.sourceHeight = sourceHeight;
+    }
+    drawTexturedTriangle(ctx, source, sourceX, sourceY, sourceWidth, sourceHeight, vertices, uvs, i0, i1, i2, offsetX, offsetY) {
+        const sx0 = sourceX + uvs[i0 * 2] * sourceWidth;
+        const sy0 = sourceY + uvs[i0 * 2 + 1] * sourceHeight;
+        const sx1 = sourceX + uvs[i1 * 2] * sourceWidth;
+        const sy1 = sourceY + uvs[i1 * 2 + 1] * sourceHeight;
+        const sx2 = sourceX + uvs[i2 * 2] * sourceWidth;
+        const sy2 = sourceY + uvs[i2 * 2 + 1] * sourceHeight;
+        const dx0 = offsetX + vertices[i0 * 2];
+        const dy0 = offsetY + vertices[i0 * 2 + 1];
+        const dx1 = offsetX + vertices[i1 * 2];
+        const dy1 = offsetY + vertices[i1 * 2 + 1];
+        const dx2 = offsetX + vertices[i2 * 2];
+        const dy2 = offsetY + vertices[i2 * 2 + 1];
+        const determinant = sx0 * (sy1 - sy2) + sx1 * (sy2 - sy0) + sx2 * (sy0 - sy1);
+        if (Math.abs(determinant) <= Number.EPSILON)
+            return;
+        const a = (dx0 * (sy1 - sy2) + dx1 * (sy2 - sy0) + dx2 * (sy0 - sy1)) / determinant;
+        const b = (dy0 * (sy1 - sy2) + dy1 * (sy2 - sy0) + dy2 * (sy0 - sy1)) / determinant;
+        const c = (dx0 * (sx2 - sx1) + dx1 * (sx0 - sx2) + dx2 * (sx1 - sx0)) / determinant;
+        const d = (dy0 * (sx2 - sx1) + dy1 * (sx0 - sx2) + dy2 * (sx1 - sx0)) / determinant;
+        const e = (dx0 * (sx1 * sy2 - sx2 * sy1) +
+            dx1 * (sx2 * sy0 - sx0 * sy2) +
+            dx2 * (sx0 * sy1 - sx1 * sy0)) /
+            determinant;
+        const f = (dy0 * (sx1 * sy2 - sx2 * sy1) +
+            dy1 * (sx2 * sy0 - sx0 * sy2) +
+            dy2 * (sx0 * sy1 - sx1 * sy0)) /
+            determinant;
+        ctx.save();
+        const centerX = (dx0 + dx1 + dx2) / 3;
+        const centerY = (dy0 + dy1 + dy2) / 3;
+        const vx0 = dx0 - centerX;
+        const vy0 = dy0 - centerY;
+        const vx1 = dx1 - centerX;
+        const vy1 = dy1 - centerY;
+        const vx2 = dx2 - centerX;
+        const vy2 = dy2 - centerY;
+        const length0 = Math.hypot(vx0, vy0);
+        const length1 = Math.hypot(vx1, vy1);
+        const length2 = Math.hypot(vx2, vy2);
+        const scale0 = length0 > 0 ? 1 + 0.5 / length0 : 1;
+        const scale1 = length1 > 0 ? 1 + 0.5 / length1 : 1;
+        const scale2 = length2 > 0 ? 1 + 0.5 / length2 : 1;
+        // Slightly overlapping clips prevent transparent antialiasing seams between adjacent triangles.
+        const clipX0 = centerX + vx0 * scale0;
+        const clipY0 = centerY + vy0 * scale0;
+        const clipX1 = centerX + vx1 * scale1;
+        const clipY1 = centerY + vy1 * scale1;
+        const clipX2 = centerX + vx2 * scale2;
+        const clipY2 = centerY + vy2 * scale2;
+        ctx.beginPath();
+        ctx.moveTo(clipX0, clipY0);
+        ctx.lineTo(clipX1, clipY1);
+        ctx.lineTo(clipX2, clipY2);
+        ctx.closePath();
+        ctx.clip();
+        ctx.transform(a, b, c, d, e, f);
+        ctx.drawImage(source, 0, 0);
+        ctx.restore();
+    }
     renderGraphics(graphics, ctx, offsetX, offsetY, forHitTest = false, skipCache = false) {
         if (graphics.commands.length === 0)
             return 0;
         // ── Offscreen cache (skip for hit-test or when caller manages its own cache) ──
         if (!forHitTest && !skipCache) {
+            let rebuilt = false;
             if (graphics.canvasCacheDirty || !graphics.offscreenCanvas) {
-                // Measure bounds to size the offscreen canvas
+                rebuilt = true;
                 const bounds = new Rectangle();
                 graphics.$measureContentBounds(bounds);
                 const cw = Math.ceil(bounds.width) || 1;
                 const ch = Math.ceil(bounds.height) || 1;
-                // Create or resize offscreen canvas
                 if (!graphics.offscreenCanvas) {
                     graphics.offscreenCanvas = document.createElement('canvas');
                     graphics.offscreenCtx = graphics.offscreenCanvas.getContext('2d', { willReadFrequently: true });
@@ -416,15 +545,16 @@ export class CanvasRenderer {
                 for (const cmd of graphics.commands) {
                     this.executeGraphicsCommand(cmd, oc2d, false);
                 }
-                // Flush any open path that wasn't closed by endFill
                 this.flushOpenPath(oc2d);
                 oc2d.restore();
                 graphics.offscreenBoundsX = bounds.x;
                 graphics.offscreenBoundsY = bounds.y;
                 graphics.canvasCacheDirty = false;
             }
-            // Draw cached offscreen canvas
-            ctx.drawImage(graphics.offscreenCanvas, offsetX + graphics.offscreenBoundsX, offsetY + graphics.offscreenBoundsY);
+            const source = this._globalTint === 0xffffff
+                ? graphics.offscreenCanvas
+                : this.getTintedGraphicsSource(graphics, this._globalTint, rebuilt);
+            ctx.drawImage(source, offsetX + graphics.offscreenBoundsX, offsetY + graphics.offscreenBoundsY);
             return 1;
         }
         // ── Hit-test path: direct execution, no cache ─────────────────────────
@@ -435,16 +565,12 @@ export class CanvasRenderer {
         for (const cmd of graphics.commands) {
             this.executeGraphicsCommand(cmd, ctx, forHitTest);
         }
-        // Flush any open path that wasn't closed by endFill
         this.flushOpenPath(ctx);
         ctx.restore();
         return 1;
     }
     renderTextField(tf, ctx, offsetX, offsetY) {
-        tf.getLinesArr(); // ensure lines are computed
-        // INPUT mode while focused: HTML input element owns the display.
-        // Only render background/border so the field is visible, but skip
-        // text content to avoid the double-text artefact.
+        tf.getLinesArr();
         const inputFocused = tf.type === TextFieldType.INPUT && tf.isTyping;
         const width = !isNaN(tf.$explicitWidth) ? tf.$explicitWidth : tf.textWidth;
         const height = !isNaN(tf.$explicitHeight) ? tf.$explicitHeight : tf.textHeight;
@@ -463,7 +589,6 @@ export class CanvasRenderer {
             ctx.lineWidth = 1;
             ctx.strokeRect(0, 0, width, height);
         }
-        // While the native input is active, skip text/cursor rendering.
         if (inputFocused) {
             ctx.restore();
             return 0;
@@ -490,11 +615,7 @@ export class CanvasRenderer {
         }
         // ── ScrollV offset ────────────────────────────────────────────────────
         const scrollOffset = tf.getScrollYOffset();
-        // ── Draw lines (Egret-style: textBaseline='middle', y at line-height center) ──
-        // Following Egret's TextField.drawText():
-        //   drawY advances by h/2 before drawing, then h/2 + lineSpacing after.
-        //   Each element's y = drawY + (lineHeight - elementSize) / 2.
-        //   With textBaseline='middle', the browser handles vertical centering automatically.
+        // ── Text lines ───────────────────────────────────────────────────────────
         let drawY = verticalOffset - scrollOffset;
         let drawCalls = 0;
         for (let i = 0; i < lines.length; i++) {
@@ -505,7 +626,6 @@ export class CanvasRenderer {
                 drawY += h / 2 + lineSpacing;
                 continue;
             }
-            // Horizontal alignment offset
             let lineX = 0;
             if (tf.textAlign === HorizontalAlign.RIGHT) {
                 lineX = width - line.width;
@@ -513,7 +633,6 @@ export class CanvasRenderer {
             else if (tf.textAlign === HorizontalAlign.CENTER) {
                 lineX = (width - line.width) / 2;
             }
-            // Draw each element in the line
             for (const el of line.elements) {
                 const style = el.style;
                 const fontSize = style?.size ?? tf.size;
@@ -528,7 +647,6 @@ export class CanvasRenderer {
                 ctx.textBaseline = 'middle';
                 ctx.textAlign = 'left';
                 const textY = drawY + (h - fontSize) / 2;
-                // Stroke
                 if (stroke > 0) {
                     ctx.strokeStyle = colorToString(strokeColor);
                     ctx.lineWidth = stroke * 2;
@@ -536,7 +654,6 @@ export class CanvasRenderer {
                     ctx.strokeText(el.text, lineX, textY);
                     drawCalls++;
                 }
-                // Fill
                 ctx.fillStyle = colorToString(textColor);
                 ctx.fillText(el.text, lineX, textY);
                 drawCalls++;
@@ -546,12 +663,10 @@ export class CanvasRenderer {
         }
         // ── INPUT cursor ──────────────────────────────────────────────────────
         if (tf.type === TextFieldType.INPUT && tf.isTyping) {
-            // Draw blinking cursor at caretIndex position
             const caretIndex = tf.caretIndex;
             const fontStr = getFontString(tf.size, tf.fontFamily, tf.bold, tf.italic);
             ctx.font = fontStr;
             ctx.textBaseline = 'middle';
-            // Calculate cursor x by measuring text up to caretIndex
             let cursorX = 0;
             let charCount = 0;
             for (const line of lines) {
@@ -568,7 +683,7 @@ export class CanvasRenderer {
                 }
                 if (charCount >= caretIndex)
                     break;
-                cursorX = 0; // reset x for next line
+                cursorX = 0;
             }
             const cursorY = verticalOffset - scrollOffset;
             ctx.fillStyle = colorToString(tf.textColor);
@@ -630,8 +745,6 @@ export class CanvasRenderer {
                     this._hasFill = true;
                     break;
                 }
-                // createGradientBox uses the Flash/Egret convention where the matrix
-                // maps gradient space ±819.2 (1638.4/2) to the desired box edges.
                 const GH = 819.2;
                 let gradient;
                 if (cmd.matrix) {
@@ -773,15 +886,11 @@ function applyColorMatrix(data, matrix) {
     }
 }
 // ── Graphics pixel-perfect hit test ──────────────────────────────────────────
-// Registered here to avoid circular dependency between display/ and player/.
-// Uses the shared 3×3 hitTestBuffer: translate so the test point lands at (1,1),
-// render with forHitTest=true (all shapes drawn as opaque black), then read alpha.
 const _hitRenderer = new CanvasRenderer();
 setGraphicsHitTest((graphics, localX, localY) => {
     const buf = hitTestBuffer();
     buf.clear();
     const ctx = buf.context;
-    // Translate so localX/Y maps to pixel (1,1) in the 3×3 buffer
     ctx.setTransform(1, 0, 0, 1, 1 - localX, 1 - localY);
     _hitRenderer.renderGraphicsToContext(graphics, ctx, 0, 0, true);
     ctx.setTransform(1, 0, 0, 1, 0, 0);
@@ -793,7 +902,6 @@ setGraphicsHitTest((graphics, localX, localY) => {
     }
 });
 // ── Bitmap pixel-perfect hit test ────────────────────────────────────────────
-// Renders the Bitmap into the shared 3×3 buffer at the test point and reads alpha.
 setBitmapPixelHitTest((bitmap, localX, localY) => {
     const buf = hitTestBuffer();
     buf.clear();