Skip to content

Optimize silhouette readback canvas - #21

Open
kubohiroya wants to merge 3 commits into
TurboWarp:developfrom
kubohiroya:perf/silhouette-readback-context
Open

Optimize silhouette readback canvas#21
kubohiroya wants to merge 3 commits into
TurboWarp:developfrom
kubohiroya:perf/silhouette-readback-context

Conversation

@kubohiroya

@kubohiroya kubohiroya commented Aug 15, 2026

Copy link
Copy Markdown

Use a readback-optimized Canvas2D context for the shared canvas used by Silhouette.unlazy() during SVG/bitmap picking.

Passing willReadFrequently: true at the canvas's initial context creation declares the repeated getImageData() usage up front and avoids Chromium's Canvas2D readback heuristic warning. Other renderer canvases, including TextBubbleSkin, are unchanged.

Microbenchmark (Chrome 149.0.7827.55 headless on macOS; shared 480×360 canvas; resize → drawImage → getImageData; median of 10 alternating rounds):

  • default context: 26.6 ms / 100 iterations
  • willReadFrequently: true: 26.6 ms / 100 iterations

This benchmark does not show a measurable speed improvement, so the PR does not claim one.

Validation:

  • npm run lint: pass
  • npm run build: pass
  • unit tests: pass
  • GitHub CI: pass
  • local legacy Playwright integration binary: cannot launch on this macOS/Node environment (spawn Unknown system error -88)

Downstream tracking: kubohiroya/tmpose-kamishibai#564

@GarboMuffin

Copy link
Copy Markdown
Member

do you have a benchmark - even a micro one - where this shows measurable improvement?

@kubohiroya

Copy link
Copy Markdown
Author

I ran a microbenchmark that mirrors Silhouette.unlazy(): reuse one canvas, resize it to 480×360, drawImage(), then getImageData(). Each result is the median of 10 alternating rounds; each round uses 11 batches of 100 readbacks after warm-up.

Chrome 149.0.7827.55 (headless, macOS):

  • default 2D context: 26.6 ms / 100 iterations
  • willReadFrequently: true: 26.6 ms / 100 iterations

So I do not have a measurable speed improvement to claim in this environment. The concrete effect is declaring the actual repeated-readback usage up front and avoiding Chrome's canvas readback heuristic warning in the downstream real-browser scenario.

I also narrowed the PR in c69318a: the hint now applies only to Silhouette._updateCanvas(), which actually calls getImageData(). I removed it from TextBubbleSkin, which only measures/draws text and therefore did not have the same responsibility.

Local lint, build, and unit tests pass. The old pinned Playwright Chromium integration binary could not launch on this macOS/Node environment (spawn Unknown system error -88); the PR's GitHub CI is the authoritative integration run.

@GarboMuffin

Copy link
Copy Markdown
Member

i asked you not codex

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants