diff --git a/packages/board/__tests__/__snapshots__/index.test.ts.snap b/packages/board/__tests__/__snapshots__/index.test.ts.snap
index f6d9a7c..3b5e7ad 100644
--- a/packages/board/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/index.test.ts.snap
@@ -34,22 +34,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 3600,
-      "dWidth": 4000,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="3600"
-        width="4000"
-      />,
-      "sHeight": 3600,
-      "sWidth": 4000,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -59,7 +51,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
index c45c952..dcf4c82 100644
--- a/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/other-api.test.ts.snap
@@ -34,22 +34,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": -2400,
-      "dy": -1600,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -59,7 +51,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/scale.test.ts.snap b/packages/board/__tests__/__snapshots__/scale.test.ts.snap
index e498d2f..fa27093 100644
--- a/packages/board/__tests__/__snapshots__/scale.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/scale.test.ts.snap
@@ -34,22 +34,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 3600,
-      "dWidth": 4000,
-      "dx": 200,
-      "dy": 0,
-      "img": <canvas
-        height="3600"
-        width="4000"
-      />,
-      "sHeight": 3600,
-      "sWidth": 4000,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -59,7 +51,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
@@ -162,22 +205,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 2400,
-      "dWidth": 4800,
-      "dx": 0,
-      "dy": 200,
-      "img": <canvas
-        height="2400"
-        width="4800"
-      />,
-      "sHeight": 2400,
-      "sWidth": 4800,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -187,7 +222,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
@@ -290,22 +376,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 2400,
-      "dWidth": 4000,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="2400"
-        width="4000"
-      />,
-      "sHeight": 2400,
-      "sWidth": 4000,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -315,7 +393,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
@@ -418,22 +547,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 600,
-      "dy": 400,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -443,7 +564,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
index 2c625dd..d2b1942 100644
--- a/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/scroll.test.ts.snap
@@ -34,22 +34,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": -2400,
-      "dy": -1600,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -59,7 +51,58 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
diff --git a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
index b5561f8..c9d2232 100644
--- a/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
+++ b/packages/board/__tests__/__snapshots__/wheel.test.ts.snap
@@ -34,39 +34,14 @@ Array [
       0,
       0,
     ],
-    "type": "clearRect",
+    "type": "fillRect",
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": -2400,
-      "dy": -1600,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
-    },
-    "transform": Array [
-      1,
-      0,
-      0,
-      1,
-      0,
-      0,
-    ],
-    "type": "drawImage",
-  },
-  Object {
-    "props": Object {
-      "height": 80,
-      "width": 2400,
-      "x": 0,
-      "y": 1520,
+      "height": 480,
+      "width": 800,
+      "x": 40,
+      "y": 40,
     },
     "transform": Array [
       1,
@@ -80,137 +55,10 @@ Array [
   },
   Object {
     "props": Object {
-      "fillRule": "nonzero",
-      "path": Array [
-        Object {
-          "props": Object {},
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "beginPath",
-        },
-        Object {
-          "props": Object {
-            "x": 2240,
-            "y": 1520,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "moveTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2400,
-            "cpx2": 2400,
-            "cpy1": 1520,
-            "cpy2": 1600,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2400,
-            "cpx2": 2200,
-            "cpy1": 1600,
-            "cpy2": 1600,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2200,
-            "cpx2": 2200,
-            "cpy1": 1600,
-            "cpy2": 1520,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2200,
-            "cpx2": 2400,
-            "cpy1": 1520,
-            "cpy2": 1520,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {},
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "closePath",
-        },
-      ],
-    },
-    "transform": Array [
-      1,
-      0,
-      0,
-      1,
-      0,
-      0,
-    ],
-    "type": "fill",
-  },
-  Object {
-    "props": Object {
-      "height": 1600,
-      "width": 80,
-      "x": 2320,
-      "y": 0,
+      "height": 480,
+      "width": 800,
+      "x": 320,
+      "y": 320,
     },
     "transform": Array [
       1,
@@ -224,120 +72,10 @@ Array [
   },
   Object {
     "props": Object {
-      "fillRule": "nonzero",
-      "path": Array [
-        Object {
-          "props": Object {},
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "beginPath",
-        },
-        Object {
-          "props": Object {
-            "x": 2360,
-            "y": 1400,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "moveTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2400,
-            "cpx2": 2400,
-            "cpy1": 1400,
-            "cpy2": 1600,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2400,
-            "cpx2": 2320,
-            "cpy1": 1600,
-            "cpy2": 1600,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2320,
-            "cpx2": 2320,
-            "cpy1": 1600,
-            "cpy2": 1400,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {
-            "cpx1": 2320,
-            "cpx2": 2400,
-            "cpy1": 1400,
-            "cpy2": 1400,
-            "radius": 40,
-          },
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "arcTo",
-        },
-        Object {
-          "props": Object {},
-          "transform": Array [
-            1,
-            0,
-            0,
-            1,
-            0,
-            0,
-          ],
-          "type": "closePath",
-        },
-      ],
+      "height": 480,
+      "width": 800,
+      "x": 640,
+      "y": 640,
     },
     "transform": Array [
       1,
@@ -347,7 +85,24 @@ Array [
       0,
       0,
     ],
-    "type": "fill",
+    "type": "fillRect",
+  },
+  Object {
+    "props": Object {
+      "height": 400,
+      "width": 800,
+      "x": 1560,
+      "y": 1160,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillRect",
   },
 ]
 `;
diff --git a/packages/core/__tests__/__snapshots__/index.test.ts.snap b/packages/core/__tests__/__snapshots__/index.test.ts.snap
index 139b2b6..c6d8653 100644
--- a/packages/core/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/core/__tests__/__snapshots__/index.test.ts.snap
@@ -21,18 +21,119 @@ Array [
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 20,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
     },
     "transform": Array [
       1,
@@ -42,7 +143,404 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 316,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 320,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "maxWidth": null,
+      "text": "Hello Text",
+      "x": 715,
+      "y": 520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
   },
 ]
 `;
diff --git a/packages/core/__tests__/__snapshots__/move.test.ts.snap b/packages/core/__tests__/__snapshots__/move.test.ts.snap
index 33c751a..78db278 100644
--- a/packages/core/__tests__/__snapshots__/move.test.ts.snap
+++ b/packages/core/__tests__/__snapshots__/move.test.ts.snap
@@ -21,18 +21,119 @@ Array [
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 20,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
     },
     "transform": Array [
       1,
@@ -42,7 +143,404 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 316,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 320,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "maxWidth": null,
+      "text": "Hello Text",
+      "x": 715,
+      "y": 520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
   },
 ]
 `;
@@ -115,18 +613,119 @@ Array [
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 20,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
     },
     "transform": Array [
       1,
@@ -136,7 +735,404 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 316,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 320,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "maxWidth": null,
+      "text": "Hello Text",
+      "x": 715,
+      "y": 520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
   },
 ]
 `;
diff --git a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
index ff8316f..90c61c3 100644
--- a/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
+++ b/packages/idraw/__tests__/__snapshots__/index.test.ts.snap
@@ -21,18 +21,119 @@ Array [
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 20,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
     },
     "transform": Array [
       1,
@@ -42,7 +143,404 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 316,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 320,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "maxWidth": null,
+      "text": "Hello Text",
+      "x": 715,
+      "y": 520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
   },
 ]
 `;
@@ -115,18 +613,119 @@ Array [
   },
   Object {
     "props": Object {
-      "dHeight": 1600,
-      "dWidth": 2400,
-      "dx": 0,
-      "dy": 0,
-      "img": <canvas
-        height="1600"
-        width="2400"
-      />,
-      "sHeight": 1600,
-      "sWidth": 2400,
-      "sx": 0,
-      "sy": 0,
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 20,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 860,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 460,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 20,
+            "cpy1": 460,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 20,
+            "cpx2": 860,
+            "cpy1": 20,
+            "cpy2": 20,
+            "radius": 100,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
     },
     "transform": Array [
       1,
@@ -136,7 +735,404 @@ Array [
       0,
       0,
     ],
-    "type": "drawImage",
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 120,
+            "y": 40,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 840,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 440,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 40,
+            "cpy1": 440,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 40,
+            "cpx2": 840,
+            "cpy1": 40,
+            "cpy2": 40,
+            "radius": 80,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 316,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1124,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 804,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 316,
+            "cpy1": 804,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 316,
+            "cpx2": 1124,
+            "cpy1": 316,
+            "cpy2": 316,
+            "radius": 244,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "stroke",
+  },
+  Object {
+    "props": Object {
+      "fillRule": "nonzero",
+      "path": Array [
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "beginPath",
+        },
+        Object {
+          "props": Object {
+            "x": 560,
+            "y": 320,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "moveTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 1120,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 800,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 320,
+            "cpy1": 800,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {
+            "cpx1": 320,
+            "cpx2": 1120,
+            "cpy1": 320,
+            "cpy2": 320,
+            "radius": 240,
+          },
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "arcTo",
+        },
+        Object {
+          "props": Object {},
+          "transform": Array [
+            1,
+            0,
+            0,
+            1,
+            0,
+            0,
+          ],
+          "type": "closePath",
+        },
+      ],
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fill",
+  },
+  Object {
+    "props": Object {
+      "maxWidth": null,
+      "text": "Hello Text",
+      "x": 715,
+      "y": 520,
+    },
+    "transform": Array [
+      1,
+      0,
+      0,
+      1,
+      0,
+      0,
+    ],
+    "type": "fillText",
   },
 ]
 `;