From 49423e406a06efeb3046e94743a94f231f540a0c Mon Sep 17 00:00:00 2001 From: Danila Poyarkov Date: Sat, 14 Mar 2026 12:17:08 +0300 Subject: [PATCH] Clip children to rounded corners when clipsContent is true clipsContent was always using clipRect (sharp corners), ignoring the node's corner radius. Frames and instances with rounded corners now use clipRRect, matching Figma's behavior where content is clipped to the rounded shape. Fixes avatar images appearing as squares inside circular containers. --- packages/core/src/renderer/scene.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/core/src/renderer/scene.ts b/packages/core/src/renderer/scene.ts index cde1a56e8..aacf223e5 100644 --- a/packages/core/src/renderer/scene.ts +++ b/packages/core/src/renderer/scene.ts @@ -95,11 +95,13 @@ function renderChildren( node.type === 'FRAME' || node.type === 'COMPONENT' || node.type === 'INSTANCE' if (isClippableContainer && node.clipsContent && node.childIds.length > 0) { canvas.save() - canvas.clipRect( - r.ck.LTRBRect(0, 0, node.width, node.height), - r.ck.ClipOp.Intersect, - true - ) + const hasRadius = node.cornerRadius > 0 || (node.independentCorners && + (node.topLeftRadius > 0 || node.topRightRadius > 0 || node.bottomRightRadius > 0 || node.bottomLeftRadius > 0)) + if (hasRadius) { + canvas.clipRRect(r.makeRRect(node), r.ck.ClipOp.Intersect, true) + } else { + canvas.clipRect(r.ck.LTRBRect(0, 0, node.width, node.height), r.ck.ClipOp.Intersect, true) + } for (const childId of node.childIds) { r.renderNode(canvas, graph, childId, overlays, absX, absY) }