CanvasKit finally Documented
Last year I spent months on a project built around CanvasKit — Skia compiled to WebAssembly. It is, genuinely, the best 2D graphics engine on the web: GPU-accelerated, full path operations, runtime SkSL shaders, every blend mode you've ever heard of. Flutter Web ships on it. Figma uses it for parts of its renderer. It runs at near-native speed in any browser.
And the documentation is awful.
The official docs are a single page of installation instructions, a partial overview, and the cryptic suggestion to "see the TypeScript definitions" for everything else. The interactive fiddle has been broken for years. Memory management — the thing that bites every newcomer — gets one paragraph. Bundler integration takes a day to figure out, with every framework needing its own incantation. Performance considerations? Up to you.
Six months in I had learned this the hard way. The package is brilliant; the on-ramp shouldn't be this lonely. So I built a docs for it.
What's there:
- Every type, factory, and enum in the canvaskit-wasm surface —
Path,Paint,Surface,ColorFilter,ImageFilter,Shader,RuntimeEffect,PathEffect, all of it. Member tables with real signatures, prose for the parts that need it. - A runnable demo on every page. Live editor, autocomplete from the same symbol DB the sidebar reads, hot reload on the fly. No CodeSandbox round-trip — you read a doc, you change a number, you see the result.
- Topic articles for the cross-cutting stuff: memory management, paths and cubics, blend modes, SkSL runtime effects,
saveLayervsclip, bundler integration. - Search, with
/to focus. Type a method name, jump straight to it. - A "Used in" section at the bottom of every type page so you can see where each member shows up across the rest of the API.
- Hover previews on every cross-link — first paragraph + (for enums) the value table appear in a tooltip. No tab churn while you're skimming.
If you've ever bounced off CanvasKit because the docs felt like archaeology, please go poke at it. Click a demo, edit it, break it, fix it. That's the loop the existing docs never gave us, and it's how this thing is meant to be learned.
There are still gaps — text and paragraph layout aren't covered and some upstream factories aren't wired in our bundle. Those are flagged on the relevant pages. The rest is all there.
Go play with Skia in the browser. It's a delight when the docs stop fighting you.