#Rect

Rect is a Float32Array of four floats: [left, top, right, bottom]. It's not a class — there's no delete(), no methods. JavaScript-managed. Build with CK.LTRBRect(l, t, r, b) or CK.XYWHRect(x, y, w, h). Pass to canvas.drawRect, canvas.clipRect, Path.addRect, Path.addOval, etc.

const r1 = CK.LTRBRect(60, 50, 200, 200);     // left, top, right, bottom
const r2 = CK.XYWHRect(220, 50, 140, 150);    // x, y, width, height

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

canvas.clear(CK.WHITE);
canvas.drawRect(r1, paint);
canvas.drawRect(r2, paint);
surface.flush();

paint.delete();

Both factories return identical 4-float arrays — they just differ in how they accept their inputs. Once built, you can mutate in place: r[0] = 50 shifts the left edge to 50.

#Coordinate convention

CanvasKit uses the same convention as HTML Canvas and SVG: origin at top-left, y grows downward. top < bottom for a non-empty rect.

right and bottom are exclusive when the rect describes a pixel range (matters for readPixels / writePixels); for vector draws, the rect is the geometric outline so the distinction usually doesn't matter.

#Variants

• LTRBRect(l, t, r, b) — explicit edge coordinates.
• XYWHRect(x, y, w, h) — origin + size; equivalent to LTRBRect(x, y, x + w, y + h).
• LTRBiRect(l, t, r, b) and XYWHiRect(x, y, w, h) build an IRect (Int32Array variant) — same shape, integer pixels.

#See also

• RRect — rounded rectangle (12-float array).
• IRect — integer-pixel rectangle.
• Canvas.drawRect, Path.addRect, Canvas.clipRect.