HTML Canvas 어디까지 써봤니
summary
Viewer renders huge pathology slides (scanned ~110k × 150k px, visualizing on the order of ~100 million+ data points) by pre-rasterizing pixels into bitmaps in ~3s, indexing annotations with a kd-tree so each frame draws only on-screen points, and using requestAnimationFrame, ImageBitmap and OffscreenCanvas with transfer control to move work to a worker. Micro-optimizations (32‑bit writes vs 8‑bit, etc.) vary by browser; freeing ImageBitmap memory is required. Result: interactive pan/zoom at ~60fps on modern Chrome.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 1:07Canvas basics
- 2:12Animation principles
- 5:53Frame rate and performance
- 8:49Micro-optimization limits
- 11:46Medical imaging project
- 15:3360 FPS goal and loading
- 18:08Spatial indexing optimization
- 21:08Bitmap image usage
- 23:41Offscreen canvas
- 25:12Main thread bottleneck
- 26:24Web Workers and memory
- 27:47Optimization outlook
related talks
58mRendering performance from the ground up
26mIf it moves they will watch it
36mCanvas Pixel Transformation: Beauty comes slowly
33mCoding Art
14mHigh Performance Data Visualisation with the M4 Algorithm
15mCanvas in NodeJS
23mOptimizing HTML5 Games: 10 Years of Learnings
35mDeveloping a Medical Image Viewer in ClojureScript