#Matrix

CanvasKit accepts two matrix shapes:

• 6-element affine [a, b, tx, c, d, ty] — the same as the SVG / Canvas2D / DOM DOMMatrix.a/b/c/d/e/f order. Two columns of a 2×3 matrix.
• 9-element 3×3 [m00, m01, m02, m10, m11, m12, m20, m21, m22] — full 3×3 row-major. The third row is usually [0, 0, 1] for affine; non-[0, 0, 1] introduces perspective.

Methods that take a Matrix (most of Path.transform, Canvas.concat, Shader.MakeLinearGradient's localMatrix, etc.) accept either form.

const path = new CK.Path();
path.addCircle(0, 0, 40);  // centered at origin

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

const drawn = new CK.Path();

loop(() => {
  drawn.reset();
  drawn.addPath(path);

  const angle = (mouse.x || 200) / 100;
  const k = cos(angle), s = sin(angle);
  // 6-element affine: [a, b, tx, c, d, ty]
  drawn.transform([k, -s, mouse.x || 200, s, k, mouse.y || 130]);

  canvas.clear(CK.WHITE);
  canvas.drawPath(drawn, stroke);
  surface.flush();
});

#Building matrices

The Matrix3x3Helpers namespace builds and combines 3×3 matrices: multiply, invert, rotated, scaled, translated, skewed, mapPoints. Use these instead of building the matrix array by hand if you're composing transforms.

For 4×4 perspective matrices (used by Canvas.concat44 and 3D tooling), see Matrix4x4Helpers.

#See also

• Path.transform, Path.offset.
• Canvas.concat, Canvas.getTotalMatrix.
• Matrix3x3Helpers, Matrix4x4Helpers.
• ImageFilter.MakeMatrixTransform.