#CanvasKit

The singleton you get back from CanvasKitInit(...). Throughout this docs site it's called CK. Everything else — types, factories, enums, color helpers, surface constructors, GPU contexts — hangs off this object.

import CanvasKitInit, { CanvasKit } from 'canvaskit-wasm';
const CK: CanvasKit = await CanvasKitInit({ locateFile: () => '/canvaskit.wasm' });

You don't delete() the singleton. It owns the WASM module; the page's lifetime is its lifetime.

#Color & rect helpers

Constructors that build the lightweight typed-array shapes used everywhere. None of these allocate WASM memory — they're plain Float32Array (or number).

#Constants

CK.TRANSPARENT  // 0x00000000
CK.BLACK        // 0xFF000000
CK.WHITE        // 0xFFFFFFFF
CK.RED          // 0xFFFF0000
CK.GREEN        // 0xFF00FF00
CK.BLUE         // 0xFF0000FF
CK.YELLOW       // 0xFFFFFF00
CK.CYAN         // 0xFF00FFFF
CK.MAGENTA      // 0xFFFF00FF

These are 32-bit ARGB ints, accepted anywhere InputColor is. Useful one-liners — canvas.clear(CK.WHITE) is the idiom you'll see most.

Path-verb codes for path.toCmds()/path.fromCmds():

CK.MOVE_VERB   // 0
CK.LINE_VERB   // 1
CK.QUAD_VERB   // 2
CK.CONIC_VERB  // 3
CK.CUBIC_VERB  // 4
CK.CLOSE_VERB  // 5

See Paths and cubics for the whole verb scheme.

Flags for save-layer and shadow:

CK.SaveLayerInitWithPrevious   // initialize the layer with the parent contents
CK.SaveLayerF16ColorType       // request 16-bit float backing for HDR layers
CK.ShadowTransparentOccluder   // drawShadow flag
CK.ShadowGeometricOnly         // drawShadow flag
CK.ShadowDirectionalLight      // drawShadow flag
CK.gpu                         // boolean — true if this build has GPU support compiled in

#Surface factories

// MakeSurface allocates an off-screen software surface — useful for blitting
// pre-rendered content into the visible canvas.
const off = CK.MakeSurface(200, 200);
const offCanvas = off.getCanvas();
offCanvas.clear(CK.Color(40, 90, 180, 1));

const paint = new CK.Paint();
paint.setColor(CK.WHITE);
offCanvas.drawCircle(100, 100, 60, paint);

const snap = off.makeImageSnapshot();

canvas.clear(CK.WHITE);
canvas.drawImage(snap, 110, 28, null);
surface.flush();

snap.delete();
off.delete();

#GPU & context factories

Lower-level path: get a context handle, build a GrDirectContext, then build surfaces against it.

#Image & picture factories

#Memory helpers

#Image-decode cache

CanvasKit keeps a small LRU cache of decoded image pixels (separate from any Image objects you hold). Tune the size if you're streaming many images.

#Class constructors on CK

Several classes expose their constructor through the singleton:

• new CK.Paint() → Paint
• new CK.Path() → Path
• new CK.PictureRecorder() → PictureRecorder
• new CK.ContourMeasureIter(path, forceClosed, resScale) → ContourMeasureIter

The text/typeface families (Font, Typeface, TypefaceFontProvider, TextBlob, ParagraphBuilder, ParagraphStyle, TextStyle) are present in the typings but stripped from this build — see the landing page scope notes.

#Factory namespaces

• CK.ColorFilter
• CK.ImageFilter
• CK.MaskFilter
• CK.PathEffect
• CK.Shader
• CK.RuntimeEffect — see RuntimeEffect.
• CK.ColorMatrix — see ColorMatrixHelpers.
• CK.Matrix / CK.M44 — see Matrix3x3Helpers, Matrix4x4Helpers.
• CK.Vector — see VectorHelpers.

#Enum namespaces

Every enum the build exposes is reachable as CK.<Name>.<Value>:

• CK.AlphaType, BlendMode, BlurStyle, ClipOp, ColorChannel, ColorSpace, ColorType.
• FillType, FilterMode, ImageFormat, MipmapMode.
• PaintStyle, Path1DEffect, PathOp, PointMode.
• StrokeCap, StrokeJoin, TileMode, VertexMode.

CK.FontEdging, FontHinting, GlyphRunFlags, DecorationStyle, FontSlant, FontWeight, FontWidth, PlaceholderAlignment, RectHeightStyle, RectWidthStyle, TextAlign, TextBaseline, TextDirection, TextHeightBehavior, and the *Decoration constants exist on the namespace but only matter in the upstream "full" build with text/paragraph layout.

#See also

• CanvasKitInitOptions — what CanvasKitInit takes.
• Bundler integration — how to actually load this on a page.
• Memory management — rules for the WASM objects this singleton constructs.
• Surface — every drawing path starts here.