diff --git a/blocksuite/playground/examples/renderer/canvas-renderer.ts b/blocksuite/playground/examples/renderer/canvas-renderer.ts
index dc40dd002c..7a0605b14e 100644
--- a/blocksuite/playground/examples/renderer/canvas-renderer.ts
+++ b/blocksuite/playground/examples/renderer/canvas-renderer.ts
@@ -94,13 +94,15 @@ export class CanvasRenderer {
       sectionMinX,
       sectionMinY,
     ]);
+    const w = (sectionMaxX - sectionMinX) / zoom / viewport.viewScale;
+    const h = (sectionMaxY - sectionMinY) / zoom / viewport.viewScale;
     const section: SectionLayout = {
       paragraphs,
       rect: {
         x: sectionModelCoord[0],
         y: sectionModelCoord[1],
-        w: (sectionMaxX - sectionMinX) / zoom / viewport.viewScale,
-        h: (sectionMaxY - sectionMinY) / zoom / viewport.viewScale,
+        w: Math.max(w, 0),
+        h: Math.max(h, 0),
       },
     };
 
diff --git a/blocksuite/playground/examples/renderer/painter.worker.ts b/blocksuite/playground/examples/renderer/painter.worker.ts
index 034717f24f..5ee60505c0 100644
--- a/blocksuite/playground/examples/renderer/painter.worker.ts
+++ b/blocksuite/playground/examples/renderer/painter.worker.ts
@@ -65,6 +65,10 @@ class SectionPainter {
   paint(section: SectionLayout) {
     const { canvas, ctx } = this;
     if (!canvas || !ctx) return;
+    if (section.rect.w === 0 || section.rect.h === 0) {
+      console.warn('empty section rect');
+      return;
+    }
 
     ctx.scale(this.zoom, this.zoom);