Matrix3x3Helpers

CK.Matrix is a namespace of pure-JS helpers for building and combining 9-element 3×3 Matrix arrays. Returns plain number[]s — no allocation, no delete().


const path = new CK.Path();
path.addRect(CK.LTRBRect(-30, -30, 30, 30));

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) * 0.02;
  const m = CK.Matrix.multiply(
    CK.Matrix.translated(mouse.x || 200, mouse.y || 130),
    CK.Matrix.rotated(angle)
  );
  drawn.transform(m);

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

Compose with multiply. Apply with Path.transform, Canvas.concat, etc. — anything that takes a Matrix.

Members

Member	Args	Returns	Notes
`identity`	—	`Matrix`	Identity matrix.
`invert`	`m: Matrix`	`Matrix \| null`	Inverse, or null if singular.
`mapPoints`	`m: Matrix, points: number[]`	`number[]`	Apply m to a flat `[x0, y0, x1, y1, …]` array.
`multiply`	`...matrices: Matrix[]`	`Matrix`	Right-to-left multiply.
`rotated`	`radians: number, px?: number, py?: number`	`Matrix`	Rotation around (px, py) (default origin).
`scaled`	`sx: number, sy: number, px?: number, py?: number`	`Matrix`	Scale around (px, py).
`skewed`	`kx: number, ky: number, px?: number, py?: number`	`Matrix`	Skew around (px, py).
`translated`	`dx: number, dy: number`	`Matrix`	Translation matrix.

#Matrix3x3Helpers

#Members

#See also

Matrix3x3Helpers

Members

See also