#Canvas

A Canvas records draw operations against a backing surface. You don't create one directly — surface.getCanvas() hands you the canvas tied to that surface, and every draw* you call paints into the surface's pixels. Calling surface.flush() pushes the recorded operations to the GPU (or onto a 2D context for software-backed surfaces).

Canvas is not a WASM object you delete(); its lifetime is tied to its parent Surface. When the surface goes away, the canvas does too.

The state model is a stack: save() pushes the current transform/clip/layer state, restore() pops it. saveLayer() additionally pushes an offscreen buffer that gets composited back when popped — that's how blur backdrops, blend-mode-scoped draws, and opacity groups work.

#A first draw

The simplest possible canvas program: clear, set up a paint, draw a shape, flush.

const paint = new CK.Paint();
paint.setColor(CK.Color(40, 90, 180, 1));
paint.setAntiAlias(true);

canvas.clear(CK.WHITE);
canvas.drawCircle(210, 128, 80, paint);
surface.flush();

paint.delete();

#Save / restore

save() pushes the current transform + clip + layer state. restore() pops it. They nest. Use them whenever a transform or clip should affect a region of your draws and not leak outward.

const paint = new CK.Paint();
paint.setColor(CK.Color(40, 90, 180, 1));
paint.setAntiAlias(true);

canvas.clear(CK.WHITE);

canvas.drawCircle(80, 128, 40, paint);

canvas.save();
canvas.translate(180, 0);
canvas.rotate(15, 0, 128);
canvas.drawCircle(80, 128, 40, paint);
canvas.restore();

canvas.drawCircle(340, 128, 40, paint);
surface.flush();

paint.delete();

The middle circle inherits the rotated frame; the outer two stay axis-aligned because restore() brought the original transform back.

#saveLayer with a backdrop filter

saveLayer(paint?, bounds?, backdrop?, flags?) pushes an offscreen buffer. When restore() runs, the buffer composites back into the parent layer through the layer's paint (which can carry blend modes, color filters, image filters). The optional backdrop filter samples the parent layer's pixels through that filter as the offscreen buffer is initialized — that's how frosted-glass blur works.

Error: Line 1: Unexpected identifier

#Clipping

clipRect, clipRRect, clipPath intersect (or replace) the current clip region. Anything you draw afterward is masked to that region until the next restore().

const paint = new CK.Paint();
paint.setColor(CK.Color(220, 60, 60, 1));
paint.setAntiAlias(true);

const rrect = CK.RRectXY(CK.LTRBRect(120, 50, 300, 200), 30, 30);

loop(() => {
  canvas.clear(CK.WHITE);

  canvas.save();
  canvas.clipRRect(rrect, CK.ClipOp.Intersect, true);

  for (let i = 0; i < 12; i++) {
    canvas.save();
    canvas.translate(mouse.x || 210, mouse.y || 130);
    canvas.rotate(i * 30, 0, 0);
    canvas.drawRect(CK.LTRBRect(-200, -6, 200, 6), paint);
    canvas.restore();
  }

  canvas.restore();
  surface.flush();
});

#Transformations

translate, scale, rotate, skew, concat left-multiply onto the current matrix. Reading: each call is "apply this transform to whatever was there before". The matrix is Matrix3x3 in 2D.

const paint = new CK.Paint();
paint.setStyle(CK.PaintStyle.Stroke);
paint.setStrokeWidth(2);
paint.setColor(CK.Color(40, 90, 180, 1));
paint.setAntiAlias(true);

const tile = CK.LTRBRect(-30, -30, 30, 30);

loop(() => {
  canvas.clear(CK.WHITE);

  for (let i = 0; i < 8; i++) {
    canvas.save();
    canvas.translate(60 + i * 45, 130);
    canvas.scale(1 - i * 0.06, 1 - i * 0.06);
    canvas.rotate(i * 12 + (mouse.x || 0) * 0.2, 0, 0);
    canvas.drawRect(tile, paint);
    canvas.restore();
  }

  surface.flush();
});

#Common methods

#Runtime extensions (this site only)

Canvas instances on the doc-page bundle carry two extra helpers, defined client-side:

These are not part of CanvasKit — they're implemented in the doc runtime so examples can visualize the curves without each demo redefining the helper.

#See also

• Surface — owns the canvas; flush() pushes pixels.
• Paint — color, style, blend, filters consumed by drawX calls.
• Path — geometry passed to drawPath / clipPath.
• BlendMode — composite ops for drawColor / via Paint.setBlendMode.
• ClipOp — Intersect or Replace.
• Memory management — Canvas is not deleted directly; the surface owns it.