diff --git a/blocksuite/playground/examples/renderer/canvas.worker.ts b/blocksuite/playground/examples/renderer/canvas.worker.ts
index 7ef65dd9f139e..6446c29596c95 100644
--- a/blocksuite/playground/examples/renderer/canvas.worker.ts
+++ b/blocksuite/playground/examples/renderer/canvas.worker.ts
@@ -1,5 +1,12 @@
 import { type ParagraphData } from './types.js';
 
+function segmentWords(text: string): string[] {
+  const segmenter = new Intl.Segmenter(void 0, {
+    granularity: 'word',
+  });
+  return Array.from(segmenter.segment(text)).map(({ segment }) => segment);
+}
+
 class CanvasWorkerManager {
   private canvas: OffscreenCanvas | null = null;
   private ctx: OffscreenCanvasRenderingContext2D | null = null;
@@ -17,8 +24,9 @@ class CanvasWorkerManager {
     if (!canvas || !ctx) return;
 
     ctx.fillStyle = 'yellow';
-    paragraphs.forEach(({ rect, style }) => {
-      console.log(JSON.stringify(rect), style.fontSize);
+    paragraphs.forEach(({ rect, text }) => {
+      const words = segmentWords(text);
+      console.log(words);
       const x = rect.left - editorRect.left;
       const y = rect.top - editorRect.top;
       ctx.fillRect(x, y, rect.width, rect.height);
diff --git a/blocksuite/playground/examples/renderer/to-canvas.ts b/blocksuite/playground/examples/renderer/to-canvas.ts
index d677cd0d8dc8a..425070a217449 100644
--- a/blocksuite/playground/examples/renderer/to-canvas.ts
+++ b/blocksuite/playground/examples/renderer/to-canvas.ts
@@ -17,7 +17,9 @@ function initWorker(width: number, height: number) {
 }
 
 function getWorkerData(editorHost: EditorHost) {
-  const paragraphBlocks = editorHost.querySelectorAll('affine-paragraph');
+  const paragraphBlocks = editorHost.querySelectorAll(
+    '.affine-paragraph-rich-text-wrapper [data-v-text="true"]'
+  );
   const paragraphs: ParagraphData[] = Array.from(paragraphBlocks).map(p => {
     const rect = p.getBoundingClientRect();
     const computedStyle = window.getComputedStyle(p);