CanvasKit

CanvasKit is Skia compiled to WebAssembly. It exposes the same drawing API the Chrome and Android engines use — paths, paints, shaders, image filters, runtime SkSL — at a low level, on a <canvas> element. This site documents the JavaScript surface as it ships in the canvaskit-wasm package, with a runnable demo on every page you can edit live.


const paint = new CK.Paint();
paint.setAntiAlias(true);

const ring = new CK.Path();
ring.addCircle(210, 128, 90);
ring.addCircle(210, 128, 60);
ring.setFillType(CK.FillType.EvenOdd);

const blur = CK.MaskFilter.MakeBlur(CK.BlurStyle.Normal, 6, true);

let t = 0;
loop(() => {
  t += 0.02;
  canvas.clear(CK.WHITE);

  paint.setColor(CK.Color(40, 90, 180, 0.6));
  paint.setMaskFilter(blur);
  canvas.drawPath(ring, paint);

  paint.setColor(CK.Color(220, 60, 60, 1));
  paint.setMaskFilter(null);
  canvas.save();
  canvas.translate(210, 128);
  canvas.rotate(t * 30, 0, 0);
  canvas.drawRect(CK.LTRBRect(-50, -4, 50, 4), paint);
  canvas.restore();

  surface.flush();
});

Where to start

If you've never used CanvasKit before, read these in order:

Bundler integration — getting the WASM binary into your build.
Memory management — every CanvasKit object is in WASM memory; you .delete() what you allocate.
Surface → Canvas → Paint — the three objects every program touches.
Path — once you have shapes you can fill, stroke, clip, and union with PathOp.

After that the site is a reference. Use the sidebar tree (or / to focus search) to look things up.

How the docs are organized

The sidebar has five sections.

Articles — long-form topics that don't belong to a single class: paths and cubics, blend modes, SkSL runtime effects, the memory and bundler pages above, and saveLayer vs clip.
Types — every WASM-backed class. Each page has a member table, a runnable demo, and a Used in section listing the other places that type appears as an argument or return value.
Float32 types — typed-array aliases that look like classes but aren't (Color, Rect, Matrix, …). They're plain Float32Arrays with no .delete().
Factories — CK.Foo.MakeBar namespaces. Shader, ImageFilter, ColorFilter, MaskFilter, PathEffect.
Enums — enum values exposed on CK (e.g. CK.BlendMode.Multiply).

Hover any link inside an article to preview the target page. The first paragraph plus (for enums) the value table appear in a tooltip — saves a click when you're skimming.

What's not here

This site documents the build of CanvasKit used to author it: canvaskit-wasm 0.39 with font, text, paragraph layout, and Skottie / Lottie stripped out. Those work in the upstream "full" build but aren't part of this surface, so they're not documented here. If you're rendering text or playing Lottie animations, look at upstream's typings — the API shape is the same, just present.

A few namespaces are intentionally hidden because they're shared with our internal vector tooling and not part of the public CanvasKit (FGraph, FBoolean). They won't appear in autocomplete or search.

Live demos

Every demo on this site is real. Click into one — the editor lights up, autocomplete shows the same symbol DB the sidebar does, errors render inline, and the canvas re-renders as you type. Two helpers are added on top of stock CanvasKit specifically for the docs:

loop(fn) — requestAnimationFrame driver with a lifecycle that's reset between edits.
canvas.drawAnchors(path) and canvas.drawTangents(path) — debug helpers that visualize the verbs and control points inside a Path (details).

Demos run a tracking proxy over CK, so anything you new or Make is auto-deleted between runs. Production code doesn't get this — see memory management.

Useful elsewhere

The official skia.org page on SkSL syntax is the source of truth for the shading language. Our SkSL article covers what's reachable from CanvasKit specifically.
skia.org sample apps — Skia team's smaller demos in vanilla HTML.
canvaskit-wasm on npm — release notes, version history.

#CanvasKit

#Where to start

#How the docs are organized

#What's not here