@mocanvas/editor · function

getShapeClipPath

declare function getShapeClipPath(editor: Editor, shape: ShapeRef): string | undefined

The CSS clip-path that cuts a shape down to what its ancestors allow, or undefined when nothing clips it.

The polygon is expressed in the shape's OWN coordinate space and in pixels, because that is the space the element carrying the clip-path is laid out in — a page-space path would be wrong the moment the shape is moved or rotated.

SEMANTICS-ASSUMED: polygon() with px units. The docs pin the return type (a string usable as clip-path) but not the notation; polygon() is the only notation that can express an arbitrary intersection of ancestor rectangles, and pixels avoid a percentage's dependence on the element's own measured size, which is not known here.

A shape clipped away entirely comes back as polygon(0px 0px) — a degenerate path that hides the element — rather than undefined, which would show it.

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.