From 58e7e21cccbe82a7fdc20cde341a3226c872852a Mon Sep 17 00:00:00 2001
From: moonmoon <64200419+Moon-DaeSeung@users.noreply.github.com>
Date: Mon, 13 May 2024 13:09:27 +0900
Subject: [PATCH] Opacity

---
 .vscode/settings.json                         |   1 +
 packages/flitter-svelte/src/lib/Widget.svelte |  17 ++-
 .../src/component/base/BaseColoredBox.ts      |  26 +++-
 .../src/component/base/BaseCustomPaint.ts     |   2 +-
 .../src/component/base/BaseGestureDetector.ts |   2 +-
 .../flitter/src/component/base/BaseOpacity.ts |  21 ++-
 .../src/component/base/BaseRichText.ts        |   2 +-
 packages/flitter/src/framework/index.ts       |   3 +-
 .../renderer/canvas/canvas-painter.ts         |  61 ++++++++-
 .../canvas/canvas-painting-context.ts         |  82 ++++++++++++
 .../renderer/canvas/canvas-renderer.ts        |  85 +++++++++---
 .../src/framework/renderer/canvas/layer.ts    | 121 ++++++++++++++++++
 .../src/framework/renderer/renderer.ts        |  53 +++++++-
 .../src/framework/renderer/svg/svg-painter.ts |  63 ++-------
 .../framework/renderer/svg/svg-renderer.ts    |  16 +--
 .../flitter/src/renderobject/RenderObject.ts  |  27 +++-
 .../flitter/src/renderobject/RenderView.ts    |  20 ++-
 packages/flitter/src/runApp.ts                |  23 ++--
 .../flitter/src/type/_types/text-painter.ts   |   2 +-
 packages/flitter/src/utils/type.ts            |   7 -
 packages/story/src/Widget.svelte              |   5 +-
 .../stories/Container/Container.stories.ts    |  13 ++
 .../src/stories/Opacity/Widget.stories.ts     |  36 ++++++
 23 files changed, 558 insertions(+), 130 deletions(-)
 create mode 100644 packages/flitter/src/framework/renderer/canvas/canvas-painting-context.ts
 create mode 100644 packages/flitter/src/framework/renderer/canvas/layer.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 64ca25d..cec2c64 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,6 +7,7 @@
     "flutterjs",
     "lerp",
     "linkedom",
+    "LTWH",
     "meursyphus",
     "popmotion",
     "postbuild",
diff --git a/packages/flitter-svelte/src/lib/Widget.svelte b/packages/flitter-svelte/src/lib/Widget.svelte
index 6688a25..1381b6e 100644
--- a/packages/flitter-svelte/src/lib/Widget.svelte
+++ b/packages/flitter-svelte/src/lib/Widget.svelte
@@ -4,6 +4,7 @@
 	import { type Widget, Alignment, AppRunner, Container, Text } from '@meursyphus/flitter';
 	const browser = typeof window !== 'undefined';
 
+	export let renderer: 'svg' | 'canvas' = 'svg';
 	export let widget: Widget = Container({
 		width: Infinity,
 		height: Infinity,
@@ -22,7 +23,7 @@
 	export let width = '100%';
 	export let height = '300px';
 
-	let svgEl: SVGSVGElement;
+	let renderEl: SVGSVGElement | HTMLCanvasElement;
 	let containerEl: HTMLElement;
 	let runner: AppRunner;
 	let innerHTML: string = '';
@@ -40,12 +41,12 @@
 
 	onMount(() => {
 		runner = new AppRunner({
-			view: svgEl,
+			view: renderEl,
 			window: window,
 			document: document,
 			ssrSize: ssr?.size
 		});
-		svgEl.innerHTML = '';
+		renderEl.innerHTML = '';
 		runner.runApp(widget);
 		runner.onMount({
 			resizeTarget: containerEl
@@ -58,9 +59,13 @@
 </script>
 
 <div bind:this={containerEl} style="--width: {width}; --height: {height}">
-	<svg class="flitter" bind:this={svgEl}>
-		{@html innerHTML}
-	</svg>
+	{#if renderer === 'canvas' && browser}
+		<canvas class="flitter" bind:this={renderEl} />
+	{:else}
+		<svg class="flitter" bind:this={renderEl}>
+			{@html innerHTML}
+		</svg>
+	{/if}
 </div>
 
 <style>
diff --git a/packages/flitter/src/component/base/BaseColoredBox.ts b/packages/flitter/src/component/base/BaseColoredBox.ts
index b6fbea6..51fa274 100644
--- a/packages/flitter/src/component/base/BaseColoredBox.ts
+++ b/packages/flitter/src/component/base/BaseColoredBox.ts
@@ -1,6 +1,10 @@
-import { SvgPainter } from "../../framework";
+import {
+  SvgPainter,
+  type SvgPaintContext,
+  type CanvasPaintingContext,
+  CanvasPainter,
+} from "../../framework";
 import SingleChildRenderObject from "../../renderobject/SingleChildRenderObject";
-import type { SvgPaintContext } from "../../utils/type";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
 
@@ -43,9 +47,13 @@ class RenderColoredBox extends SingleChildRenderObject {
     this._color = color;
   }
 
-  createSvgPainter() {
+  override createSvgPainter() {
     return new SvgPainterColoredBox(this);
   }
+
+  override createCanvasPainter() {
+    return new CanvasPainterColoredBox(this);
+  }
 }
 
 class SvgPainterColoredBox extends SvgPainter {
@@ -69,4 +77,16 @@ class SvgPainterColoredBox extends SvgPainter {
   }
 }
 
+class CanvasPainterColoredBox extends CanvasPainter {
+  get color() {
+    return (this.renderObject as RenderColoredBox).color;
+  }
+
+  protected override performPaint(paintContext: CanvasPaintingContext): void {
+    const { canvas: ctx } = paintContext;
+    ctx.fillStyle = this.color;
+    ctx.fillRect(0, 0, this.size.width, this.size.height);
+  }
+}
+
 export default ColoredBox;
diff --git a/packages/flitter/src/component/base/BaseCustomPaint.ts b/packages/flitter/src/component/base/BaseCustomPaint.ts
index eb0b0e2..d45f43b 100644
--- a/packages/flitter/src/component/base/BaseCustomPaint.ts
+++ b/packages/flitter/src/component/base/BaseCustomPaint.ts
@@ -2,7 +2,7 @@ import { SvgPainter } from "../../framework";
 import SingleChildRenderObject from "../../renderobject/SingleChildRenderObject";
 import type { Constraints } from "../../type";
 import { Size } from "../../type";
-import type { SvgPaintContext } from "../../utils/type";
+import type { SvgPaintContext } from "../../framework";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
 
diff --git a/packages/flitter/src/component/base/BaseGestureDetector.ts b/packages/flitter/src/component/base/BaseGestureDetector.ts
index ec1b126..b4331eb 100644
--- a/packages/flitter/src/component/base/BaseGestureDetector.ts
+++ b/packages/flitter/src/component/base/BaseGestureDetector.ts
@@ -2,7 +2,7 @@ import { SvgPainter } from "../../framework";
 import type { RenderObjectElement } from "../../element";
 import SingleChildRenderObject from "../../renderobject/SingleChildRenderObject";
 import { assert, createUniqueId } from "../../utils";
-import type { SvgPaintContext } from "../../utils/type";
+import type { SvgPaintContext } from "../../framework";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
 import type Widget from "../../widget/Widget";
 import type { Offset } from "../../type";
diff --git a/packages/flitter/src/component/base/BaseOpacity.ts b/packages/flitter/src/component/base/BaseOpacity.ts
index 3201f12..859f36c 100644
--- a/packages/flitter/src/component/base/BaseOpacity.ts
+++ b/packages/flitter/src/component/base/BaseOpacity.ts
@@ -1,4 +1,8 @@
-import { SvgPainter } from "../../framework";
+import {
+  SvgPainter,
+  CanvasPainter,
+  type CanvasPaintingContext,
+} from "../../framework";
 import SingleChildRenderObject from "../../renderobject/SingleChildRenderObject";
 import { assert } from "../../utils";
 import SingleChildRenderObjectWidget from "../../widget/SingleChildRenderObjectWidget";
@@ -52,9 +56,12 @@ class RenderOpacity extends SingleChildRenderObject {
       this.size = this.child.size;
     }
   }
-  createSvgPainter(): SvgPainter {
+  override createSvgPainter(): SvgPainter {
     return new SvgPainterOpacity(this);
   }
+  override createCanvasPainter(): CanvasPainter {
+    return new CanvasPainterOpacity(this);
+  }
 }
 
 class SvgPainterOpacity extends SvgPainter {
@@ -67,4 +74,14 @@ class SvgPainterOpacity extends SvgPainter {
   }
 }
 
+class CanvasPainterOpacity extends CanvasPainter {
+  get opacity() {
+    return (this.renderObject as RenderOpacity).opacityProp;
+  }
+
+  override performPaint(context: CanvasPaintingContext) {
+    context.canvas.globalAlpha *= this.opacity;
+  }
+}
+
 export default Opacity;
diff --git a/packages/flitter/src/component/base/BaseRichText.ts b/packages/flitter/src/component/base/BaseRichText.ts
index 4ef8fd1..4b240ee 100644
--- a/packages/flitter/src/component/base/BaseRichText.ts
+++ b/packages/flitter/src/component/base/BaseRichText.ts
@@ -7,7 +7,7 @@ import {
   TextOverflow,
   Size,
 } from "../../type";
-import type { SvgPaintContext } from "../../utils/type";
+import type { SvgPaintContext } from "../../framework";
 import RenderObjectWidget from "../../widget/RenderObjectWidget";
 import type InlineSpan from "../../type/_types/Inline-span";
 import TextPainter from "../../type/_types/text-painter";
diff --git a/packages/flitter/src/framework/index.ts b/packages/flitter/src/framework/index.ts
index c4e9298..2268ff8 100644
--- a/packages/flitter/src/framework/index.ts
+++ b/packages/flitter/src/framework/index.ts
@@ -1,8 +1,9 @@
 export { default as BuildOwner } from "./BuildOwner";
 export { RenderPipeline } from "./renderer/renderer";
 export { RenderPipelineProvider } from "./renderer/provider";
-export { SvgPainter } from "./renderer/svg/svg-painter";
+export { SvgPainter, type SvgPaintContext } from "./renderer/svg/svg-painter";
 export { CanvasPainter } from "./renderer/canvas/canvas-painter";
+export { type CanvasPaintingContext } from "./renderer/canvas/canvas-painting-context";
 export { default as Scheduler } from "./Scheduler";
 export { default as RenderFrameDispatcher } from "./RenderFrameDispatcher";
 export { default as GlobalKey } from "./Globalkey";
diff --git a/packages/flitter/src/framework/renderer/canvas/canvas-painter.ts b/packages/flitter/src/framework/renderer/canvas/canvas-painter.ts
index 47e7ae9..376a6b5 100644
--- a/packages/flitter/src/framework/renderer/canvas/canvas-painter.ts
+++ b/packages/flitter/src/framework/renderer/canvas/canvas-painter.ts
@@ -1,5 +1,60 @@
-import type { RenderObject } from "../../../renderobject/RenderObject";
+import { Rect } from "../../../type";
+import { NotImplementedError } from "../../../exception";
+import { Painter } from "../renderer";
+import type { CanvasRenderPipeline } from "./canvas-renderer";
+import type { CanvasPaintingContext } from "./canvas-painting-context";
+import { OffsetLayer, type ContainerLayer } from "./layer";
+import { assert } from "src/utils";
 
-export class CanvasPainter {
-  constructor(public readonly renderObject: RenderObject) {}
+export class CanvasPainter extends Painter {
+  get renderOwner(): CanvasRenderPipeline {
+    return this.renderObject.renderOwner as CanvasRenderPipeline;
+  }
+  get isRepaintBoundary() {
+    return false;
+  }
+
+  paint(context: CanvasPaintingContext) {
+    this.needsPaint = false;
+    context.canvas.translate(this.offset.x, this.offset.y);
+    this.performPaint(context);
+    this.#paintChildren(context);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  protected performPaint(context: CanvasPaintingContext) {}
+
+  #paintChildren(context: CanvasPaintingContext) {
+    this.renderObject.visitChildren(child => {
+      child.canvasPainter.paint(context);
+    });
+  }
+
+  get paintBounds(): Rect {
+    return Rect.fromLTWH({
+      left: this.offset.x,
+      top: this.offset.y,
+      width: this.size.width,
+      height: this.size.height,
+    });
+  }
+
+  #layer: ContainerLayer;
+  get layer() {
+    return this.#layer;
+  }
+  set layer(layer: ContainerLayer) {
+    this.#layer = layer;
+  }
+  updateCompositedLayer(oldLayer: ContainerLayer | null) {
+    assert(
+      this.isRepaintBoundary,
+      "updateCompositedLayer must be called on a repaint boundary",
+    );
+    return oldLayer ?? new OffsetLayer();
+  }
+
+  skippedPaintingOnLayer() {
+    throw new NotImplementedError("skippedPaintingOnLayer on CanvasPainter");
+  }
 }
diff --git a/packages/flitter/src/framework/renderer/canvas/canvas-painting-context.ts b/packages/flitter/src/framework/renderer/canvas/canvas-painting-context.ts
new file mode 100644
index 0000000..7f86309
--- /dev/null
+++ b/packages/flitter/src/framework/renderer/canvas/canvas-painting-context.ts
@@ -0,0 +1,82 @@
+import { assert } from "../../../utils";
+import type { RenderObject } from "../../../renderobject";
+import type { Rect } from "../../../type";
+import {
+  type ContainerLayer,
+  PictureLayer,
+  PictureRecorder,
+  type Layer,
+} from "./layer";
+
+export class CanvasPaintingContext {
+  #estimateBound: Rect;
+  #containerLayer: ContainerLayer;
+  constructor(containerLayer: ContainerLayer, estimateBound: Rect) {
+    this.#containerLayer = containerLayer;
+    this.#estimateBound = estimateBound;
+  }
+  #currentLayer: PictureLayer | null;
+
+  static repaintCompositedChild(node: RenderObject): void {
+    assert(
+      node.canvasPainter.isRepaintBoundary,
+      "isRepaintBoundary must be true on repaintCompositedChild",
+    );
+    let childLayer = node.canvasPainter.layer;
+    if (childLayer == null) {
+      childLayer = node.canvasPainter.updateCompositedLayer(null);
+      node.canvasPainter.layer = childLayer;
+    } else {
+      const updatedChildLayer =
+        node.canvasPainter.updateCompositedLayer(childLayer);
+      assert(
+        childLayer === updatedChildLayer,
+        "updateCompositedLayer must return the same layer",
+      );
+      updatedChildLayer.removeAllChildren();
+    }
+
+    const childContext = new CanvasPaintingContext(
+      childLayer,
+      node.canvasPainter.paintBounds,
+    );
+    node.canvasPainter.paint(childContext);
+    childContext.stopRecording();
+  }
+
+  static updateLayerProperties(_: RenderObject): void {
+    console.warn("updateLayerProperties is not implemented");
+  }
+
+  #recorder: PictureRecorder;
+  #ctx: CanvasRenderingContext2D | null;
+  get canvas(): CanvasRenderingContext2D {
+    if (this.#ctx == null) {
+      this.#startRecording();
+    }
+    return this.#ctx;
+  }
+
+  #startRecording() {
+    this.#currentLayer = new PictureLayer(this.#estimateBound);
+    this.#recorder = new PictureRecorder(this.#estimateBound);
+    this.#ctx = this.#recorder.createCanvasContext();
+    this.#containerLayer.append(this.#currentLayer!);
+  }
+
+  stopRecording() {
+    this.#currentLayer.picture = this.#recorder.endRecording();
+    this.#recorder = null;
+    this.#ctx = null;
+    this.#currentLayer = null;
+  }
+
+  addLayer(layer: Layer) {
+    this.stopRecording();
+    this.#appendLayer(layer);
+  }
+
+  #appendLayer(layer: Layer) {
+    this.#containerLayer.append(layer);
+  }
+}
diff --git a/packages/flitter/src/framework/renderer/canvas/canvas-renderer.ts b/packages/flitter/src/framework/renderer/canvas/canvas-renderer.ts
index 9967dae..8e1340e 100644
--- a/packages/flitter/src/framework/renderer/canvas/canvas-renderer.ts
+++ b/packages/flitter/src/framework/renderer/canvas/canvas-renderer.ts
@@ -1,41 +1,90 @@
 import type { RenderObject } from "../../../renderobject/RenderObject";
-import { NotImplementedError } from "../../../exception";
 import { RenderPipeline } from "../renderer";
+import { Constraints } from "../../../type";
+import { CanvasPaintingContext } from "./canvas-painting-context";
+import { assert } from "../../../utils";
+import { SceneBuilder } from "./layer";
 
 export class CanvasRenderPipeline extends RenderPipeline {
   override drawFrame(): void {
-    throw new NotImplementedError("drawFrame on CanvasRenderPipeline");
+    this.flushLayout();
+    this.flushPaintTransformUpdate();
+    this.flushPaint();
+    this.recalculateZOrder();
+    this.#compositeFrame();
   }
 
   override reinitializeFrame(): void {
-    throw new NotImplementedError("reinitializeFrame on CanvasRenderPipeline");
+    this.renderView.layout(Constraints.tight(this.renderContext.viewSize));
+    this.renderView.updatePaintTransform();
+    CanvasPaintingContext.repaintCompositedChild(this.renderView);
+    this.#compositeFrame();
   }
 
   override flushPaint(): void {
-    throw new NotImplementedError("flushPaint on CanvasRenderPipeline");
+    const dirties = this.needsPaintRenderObjects;
+    this.needsPaintRenderObjects = [];
+
+    dirties
+      .sort((a, b) => b.depth - a.depth)
+      .forEach(node => {
+        if (node.canvasPainter.layer?.attached) {
+          assert(
+            node.canvasPainter.isRepaintBoundary,
+            "isRepaintBoundary must be true on flushPaint",
+          );
+          if (node.needsPaint) {
+            CanvasPaintingContext.repaintCompositedChild(node);
+          } else {
+            CanvasPaintingContext.updateLayerProperties(node);
+          }
+        } else {
+          node.canvasPainter.skippedPaintingOnLayer();
+        }
+      });
   }
 
   override disposeRenderObject(_: RenderObject): void {
-    throw new NotImplementedError(
-      "disposeRenderObject on CanvasRenderPipeline",
-    );
+    // Nothing needs to be implemented
   }
 
-  override markNeedsPaint(_: RenderObject): void {
-    throw new NotImplementedError(
-      "markNeedsPaintRenderObject on CanvasRenderPipeline",
-    );
+  override markNeedsPaint(renderObject: RenderObject): void {
+    let parent = renderObject;
+    while (parent != null && !parent.canvasPainter.isRepaintBoundary) {
+      parent = parent.parent;
+    }
+    if (parent != null) {
+      parent.needsPaint = true;
+      this.needsPaintRenderObjects.push(parent);
+    }
   }
 
-  protected override flushPaintTransformUpdate(): void {
-    throw new NotImplementedError(
-      "flushPaintTransformUpdate on CanvasRenderPipeline",
-    );
+  override markNeedsPaintTransformUpdate(renderObject: RenderObject): void {
+    renderObject.needsPaintTransformUpdate = true;
+    this.needsPaintTransformUpdateRenderObjects.push(renderObject);
+    this.markNeedsPaint(renderObject);
   }
 
-  override markNeedsPaintTransformUpdate(_: RenderObject): void {
-    throw new NotImplementedError(
-      "flushPaintTransformUpdate on CanvasRenderPipeline",
+  override didChangePaintTransform(renderObjet: RenderObject): void {
+    renderObjet.markNeedsPaint();
+  }
+
+  #compositeFrame() {
+    const builder = new SceneBuilder();
+    const ctx = this.#prepareCanvas(
+      this.renderContext.view as HTMLCanvasElement,
     );
+    this.renderView.canvasPainter.layer.buildScene(builder);
+    builder.render(ctx);
+  }
+
+  #prepareCanvas(canvas: HTMLCanvasElement): CanvasRenderingContext2D {
+    const size = this.renderContext.viewSize;
+    const dpr = window.devicePixelRatio;
+    canvas.width = size.width * dpr;
+    canvas.height = size.height * dpr;
+    const ctx = canvas.getContext("2d");
+    ctx.scale(dpr, dpr);
+    return ctx;
   }
 }
diff --git a/packages/flitter/src/framework/renderer/canvas/layer.ts b/packages/flitter/src/framework/renderer/canvas/layer.ts
new file mode 100644
index 0000000..f90d8c0
--- /dev/null
+++ b/packages/flitter/src/framework/renderer/canvas/layer.ts
@@ -0,0 +1,121 @@
+import type { Offset, Matrix4, Rect } from "../../../type";
+import type { CanvasRenderPipeline } from "./canvas-renderer";
+export abstract class Layer {
+  attached: boolean = false;
+  owner: CanvasRenderPipeline;
+
+  attach(owner: CanvasRenderPipeline) {
+    this.attached = true;
+    this.owner = owner;
+  }
+  abstract addToScene(builder: SceneBuilder);
+}
+
+export class PictureLayer extends Layer {
+  #paintBounds: Rect;
+  picture: Picture;
+  constructor(paintBounds: Rect) {
+    super();
+    this.#paintBounds = paintBounds;
+  }
+  override addToScene(builder: SceneBuilder) {
+    builder.addPicture({
+      x: this.#paintBounds.left,
+      y: this.#paintBounds.top,
+      picture: this.picture,
+    });
+  }
+}
+
+export class ContainerLayer extends Layer {
+  children: Layer[] = [];
+  override addToScene(builder: SceneBuilder) {
+    this.visitChildren(layer => {
+      layer.addToScene(builder);
+    });
+  }
+
+  visitChildren(visitor: (layer: Layer) => void) {
+    for (const child of this.children) {
+      visitor(child);
+    }
+  }
+  removeAllChildren() {
+    this.children = [];
+  }
+
+  buildScene(builder: SceneBuilder) {
+    this.addToScene(builder);
+  }
+
+  append(child: Layer) {
+    this.children.push(child);
+    child.attach(this.owner);
+  }
+}
+
+export class OffsetLayer extends ContainerLayer {
+  offset: Offset;
+}
+export class TransformLayer extends OffsetLayer {
+  transform: Matrix4;
+}
+
+export class SceneBuilder {
+  #pictures: { x: number; y: number; picture: Picture }[] = [];
+
+  render(ctx: CanvasRenderingContext2D) {
+    /**
+     * Vertical layering not yet considered.
+     * Addition required!
+     */
+    for (const { x, y, picture } of this.#pictures) {
+      ctx.drawImage(picture.toImage(), x, y);
+    }
+  }
+
+  addPicture(props: { x: number; y: number; picture: Picture }) {
+    this.#pictures.push(props);
+  }
+}
+
+class Picture {
+  #source: HTMLCanvasElement;
+  constructor(source: HTMLCanvasElement) {
+    this.#source = source;
+  }
+
+  toImage(): CanvasImageSource {
+    return this.#source;
+  }
+}
+
+export class PictureRecorder {
+  #source: HTMLCanvasElement | null;
+
+  /**
+   *
+   * @implements: This recorder is currently under implementation and does not actually record but directly reflects on the canvas context. Temporarily, it requires the paintSize immediately. The recorder is intended to manage the drawing order for implementing z-index. Once implemented, it will function as a recorder by not directly drawing on the canvas context but recording the operations.
+   */
+  constructor(paintBounds: Rect) {
+    this.#source = document.createElement("canvas");
+    this.#source.width = paintBounds.width;
+    this.#source.height = paintBounds.height;
+  }
+
+  /**
+   * @implements: This function is still incomplete. So It needs paintSize temporarily. Once completed, it will intercept the CanvasRenderingContext2D API
+   * to record in the recorder. The recorder will log according to the vertical layering order.
+   * When endRecording is called, the recorded content will be returned as a Picture.
+   */
+  createCanvasContext(): CanvasRenderingContext2D {
+    const ctx = this.#source.getContext("2d");
+    return ctx;
+  }
+
+  endRecording() {
+    const picture = new Picture(this.#source);
+    this.#source = null;
+    return picture;
+  }
+}
diff --git a/packages/flitter/src/framework/renderer/renderer.ts b/packages/flitter/src/framework/renderer/renderer.ts
index 5e466b5..48ac89c 100644
--- a/packages/flitter/src/framework/renderer/renderer.ts
+++ b/packages/flitter/src/framework/renderer/renderer.ts
@@ -1,7 +1,7 @@
 import type RenderObject from "../../renderobject/RenderObject";
 import type { RenderObjectVisitor } from "../../renderobject/RenderObjectVisitor";
 import type { HitTestDispatcher } from "../../hit-test/HitTestDispatcher";
-import { Size } from "../../type";
+import { type Matrix4, type Offset, Size } from "../../type";
 import type { RenderZIndex } from "../../component/base/BaseZIndex";
 
 export class RenderContext {
@@ -14,20 +14,18 @@ export class RenderContext {
   };
   viewSize: Size = new Size({ width: 0, height: 0 });
   private resizeObserver: ResizeObserver;
-  private onResize: (size: Size) => void;
+  #resizeHandlers: ((size: Size) => void)[] = [];
 
   constructor({
     document,
     window,
     view,
-    onResize,
     viewSize,
   }: {
     document: Document;
     window: Window;
     view: SVGSVGElement | HTMLCanvasElement;
     viewSize?: { width: number; height: number };
-    onResize: (size: Size) => void;
   }) {
     this.document = document;
     this.window = window;
@@ -35,7 +33,6 @@ export class RenderContext {
     if (viewSize) {
       this.viewSize = new Size(viewSize);
     }
-    this.onResize = onResize;
   }
 
   setViewport({
@@ -74,10 +71,14 @@ export class RenderContext {
     this.resizeObserver = new ResizeObserver(([child]) => {
       const { width, height } = child.target.getBoundingClientRect();
       this.viewSize = new Size({ width, height });
-      this.onResize(this.viewSize);
+      this.#resizeHandlers.forEach(handler => handler(this.viewSize));
     });
     this.resizeObserver.observe(target);
   }
+
+  addResizeHandler(handler: (size: Size) => void) {
+    this.#resizeHandlers.push(handler);
+  }
 }
 
 export abstract class RenderPipeline {
@@ -143,10 +144,21 @@ export abstract class RenderPipeline {
   abstract drawFrame(): void;
   abstract reinitializeFrame(): void;
   protected abstract flushPaint(): void;
-  protected abstract flushPaintTransformUpdate(): void;
+  protected flushPaintTransformUpdate(): void {
+    const dirties = this.needsPaintTransformUpdateRenderObjects;
+    this.needsPaintTransformUpdateRenderObjects = [];
+
+    dirties
+      .sort((a, b) => a.depth - b.depth)
+      .forEach(renderObject => {
+        if (!renderObject.needsPaintTransformUpdate) return;
+        renderObject.updatePaintTransform();
+      });
+  }
   abstract disposeRenderObject(renderObject: RenderObject): void;
   abstract markNeedsPaint(renderObject: RenderObject): void;
   abstract markNeedsPaintTransformUpdate(renderObject: RenderObject): void;
+  abstract didChangePaintTransform(renderObject: RenderObject): void;
 }
 
 export class Painter {
@@ -157,6 +169,33 @@ export class Painter {
   constructor(renderObject: RenderObject) {
     this.renderObject = renderObject;
   }
+  get isPainter(): boolean {
+    return this.renderObject.isPainter;
+  }
+  get needsPaint(): boolean {
+    return this.renderObject.needsPaint;
+  }
+  set needsPaint(newValue: boolean) {
+    this.renderObject.needsPaint = newValue;
+  }
+  get offset(): Offset {
+    return this.renderObject.offset;
+  }
+  get type(): string {
+    return this.renderObject.type;
+  }
+  get needsPaintTransformUpdate(): boolean {
+    return this.renderObject.needsPaintTransformUpdate;
+  }
+  set needsPaintTransformUpdate(newValue: boolean) {
+    this.renderObject.needsPaintTransformUpdate = newValue;
+  }
+  get paintTransform(): Matrix4 {
+    return this.renderObject.paintTransform;
+  }
+  set paintTransform(newValue: Matrix4) {
+    this.renderObject.paintTransform = newValue;
+  }
 }
 
 type StackingContext = {
diff --git a/packages/flitter/src/framework/renderer/svg/svg-painter.ts b/packages/flitter/src/framework/renderer/svg/svg-painter.ts
index e107564..1dcd2e1 100644
--- a/packages/flitter/src/framework/renderer/svg/svg-painter.ts
+++ b/packages/flitter/src/framework/renderer/svg/svg-painter.ts
@@ -1,6 +1,5 @@
-import type { SvgPaintContext } from "../../../utils/type";
 import { assert } from "../../../utils";
-import { Matrix4, type Offset } from "../../../type";
+import type { Matrix4 } from "../../../type";
 import type { SvgRenderPipeline } from "./svg-renderer";
 import { NotImplementedError } from "../../../exception";
 import { Painter } from "../renderer";
@@ -16,6 +15,9 @@ export class SvgPainter extends Painter {
   didDomOrderChange() {
     this.#domOrderChanged = true;
   }
+  get renderOwner(): SvgRenderPipeline {
+    return this.renderObject.renderOwner as SvgRenderPipeline;
+  }
 
   get domNode() {
     if (this.#domNode == null) {
@@ -24,36 +26,6 @@ export class SvgPainter extends Painter {
     assert(this.#domNode != null, "domNode is not initialized");
     return this.#domNode;
   }
-  get isPainter(): boolean {
-    return this.renderObject.isPainter;
-  }
-  get renderOwner(): SvgRenderPipeline {
-    return this.renderObject.renderOwner as SvgRenderPipeline;
-  }
-  get needsPaint(): boolean {
-    return this.renderObject.needsPaint;
-  }
-  set needsPaint(newValue: boolean) {
-    this.renderObject.needsPaint = newValue;
-  }
-  get offset(): Offset {
-    return this.renderObject.offset;
-  }
-  get type(): string {
-    return this.renderObject.type;
-  }
-  get needsPaintTransformUpdate(): boolean {
-    return this.renderObject.needsPaintTransformUpdate;
-  }
-  set needsPaintTransformUpdate(newValue: boolean) {
-    this.renderObject.needsPaintTransformUpdate = newValue;
-  }
-  get paintTransform(): Matrix4 {
-    return this.renderObject.paintTransform;
-  }
-  set paintTransform(newValue: Matrix4) {
-    this.renderObject.paintTransform = newValue;
-  }
 
   paint(context: SvgPaintContext, clipId?: string, opacity: number = 1) {
     const clipIdChanged = this.#clipId !== clipId;
@@ -196,25 +168,14 @@ export class SvgPainter extends Painter {
   }
 
   #didChangePaintTransform = false;
-  updatePaintTransform(
-    parentPaintTransform: Matrix4 = this.renderObject?.parent?.paintTransform ??
-      Matrix4.Constants.identity,
-  ) {
-    const oldTransform = this.paintTransform;
-    const newTransform = parentPaintTransform.translated(
-      this.offset.x,
-      this.offset.y,
-    );
-    if (!this.needsPaintTransformUpdate && newTransform.equals(oldTransform)) {
-      return;
-    }
-    this.needsPaintTransformUpdate = false;
-    this.paintTransform = newTransform;
+  didChangePaintTransform() {
     this.#didChangePaintTransform = true;
-    const childPaintTransform =
-      this.renderObject.applyPaintTransform(newTransform);
-    this.renderObject.visitChildren(child => {
-      child.svgPainter.updatePaintTransform(childPaintTransform);
-    });
   }
 }
+
+export type SvgPaintContext = {
+  createSvgEl: (tagName: keyof SVGElementTagNameMap) => SVGElement;
+  appendSvgEl: (el: SVGElement) => void;
+  insertSvgEl: (el: SVGElement, index: number) => void;
+  isOnBrowser: () => boolean;
+};
diff --git a/packages/flitter/src/framework/renderer/svg/svg-renderer.ts b/packages/flitter/src/framework/renderer/svg/svg-renderer.ts
index 96745ef..9d9cd01 100644
--- a/packages/flitter/src/framework/renderer/svg/svg-renderer.ts
+++ b/packages/flitter/src/framework/renderer/svg/svg-renderer.ts
@@ -1,5 +1,5 @@
 import type RenderObject from "../../../renderobject/RenderObject";
-import type { SvgPaintContext } from "../../../utils/type";
+import type { SvgPaintContext } from "./svg-painter";
 import { Constraints } from "../../../type";
 import { RenderPipeline } from "../renderer";
 
@@ -14,7 +14,7 @@ export class SvgRenderPipeline extends RenderPipeline {
 
   override reinitializeFrame() {
     this.renderView.layout(Constraints.tight(this.renderContext.viewSize));
-    this.renderView.svgPainter.updatePaintTransform();
+    this.renderView.updatePaintTransform();
     this.renderView.svgPainter.paint(this.paintContext);
     const painterRenderObjects = this.recalculateZOrder();
     this.#rearrangeDomOrder(painterRenderObjects);
@@ -80,15 +80,7 @@ export class SvgRenderPipeline extends RenderPipeline {
     this.markNeedsPaint(renderObject);
   }
 
-  protected override flushPaintTransformUpdate(): void {
-    const dirties = this.needsPaintTransformUpdateRenderObjects;
-    this.needsPaintTransformUpdateRenderObjects = [];
-
-    dirties
-      .sort((a, b) => a.depth - b.depth)
-      .forEach(renderObject => {
-        if (!renderObject.needsPaintTransformUpdate) return;
-        renderObject.svgPainter.updatePaintTransform();
-      });
+  override didChangePaintTransform(renderObject: RenderObject): void {
+    renderObject.svgPainter.didChangePaintTransform();
   }
 }
diff --git a/packages/flitter/src/renderobject/RenderObject.ts b/packages/flitter/src/renderobject/RenderObject.ts
index 542f43d..355f856 100644
--- a/packages/flitter/src/renderobject/RenderObject.ts
+++ b/packages/flitter/src/renderobject/RenderObject.ts
@@ -149,7 +149,7 @@ export class RenderObject {
     }
   }
 
-  protected markNeedsPaint() {
+  markNeedsPaint() {
     this.renderOwner.markNeedsPaint(this);
   }
 
@@ -177,6 +177,31 @@ export class RenderObject {
   markNeedsUpdateZOrder() {
     this.renderOwner.notifyZOrderChanged();
   }
+
+  updatePaintTransform(
+    parentPaintTransform: Matrix4 = this.parent?.paintTransform ??
+      Matrix4.Constants.identity,
+  ) {
+    const oldTransform = this.paintTransform;
+    const newTransform = parentPaintTransform.translated(
+      this.offset.x,
+      this.offset.y,
+    );
+    if (!this.needsPaintTransformUpdate && newTransform.equals(oldTransform)) {
+      return;
+    }
+    this.needsPaintTransformUpdate = false;
+    this.paintTransform = newTransform;
+    this.#didChangePaintTransform();
+    const childPaintTransform = this.applyPaintTransform(newTransform);
+    this.visitChildren(child => {
+      child.updatePaintTransform(childPaintTransform);
+    });
+  }
+
+  #didChangePaintTransform(): void {
+    this.renderOwner.didChangePaintTransform(this);
+  }
 }
 
 export default RenderObject;
diff --git a/packages/flitter/src/renderobject/RenderView.ts b/packages/flitter/src/renderobject/RenderView.ts
index 6b80542..a709533 100644
--- a/packages/flitter/src/renderobject/RenderView.ts
+++ b/packages/flitter/src/renderobject/RenderView.ts
@@ -1,5 +1,6 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import type { RenderPipeline } from "../framework";
+import { ContainerLayer } from "../framework/renderer/canvas/layer";
+import type { CanvasRenderPipeline } from "../framework/renderer/canvas/canvas-renderer";
+import { type RenderPipeline, CanvasPainter } from "../framework";
 import { Size, Constraints } from "../type";
 import RenderObject from "./RenderObject";
 
@@ -21,6 +22,21 @@ class RenderView extends RenderObject {
     });
     this.children.forEach(child => child.layout(Constraints.loose(this.size)));
   }
+
+  protected createCanvasPainter(): CanvasPainter {
+    return new RootCanvasPainter(this);
+  }
+}
+
+class RootCanvasPainter extends CanvasPainter {
+  constructor(renderView: RenderView) {
+    super(renderView);
+    this.layer = new ContainerLayer();
+    this.layer.attach(renderView.renderOwner as CanvasRenderPipeline);
+  }
+  override get isRepaintBoundary() {
+    return true;
+  }
 }
 
 export default RenderView;
diff --git a/packages/flitter/src/runApp.ts b/packages/flitter/src/runApp.ts
index d088d68..dd25c96 100644
--- a/packages/flitter/src/runApp.ts
+++ b/packages/flitter/src/runApp.ts
@@ -22,10 +22,10 @@ type AppRunnerProps = {
 export class AppRunner {
   private root!: RenderObjectElement;
   private renderContext: RenderContext;
-  private viewSize?: { width: number; height: number };
   private buildOwner: BuildOwner;
   private renderPipeline: RenderPipeline;
   private scheduler: Scheduler;
+  private rendererType: "canvas" | "svg";
 
   constructor({
     view,
@@ -33,29 +33,27 @@ export class AppRunner {
     window: _window = window,
     ssrSize,
   }: AppRunnerProps) {
-    this.viewSize = ssrSize;
-
     this.renderContext = new RenderContext({
       view,
       viewSize: ssrSize,
       document: _document,
       window: _window,
-      onResize: this.handleViewResize,
     });
+    this.renderContext.addResizeHandler(size => this.handleViewResize(size));
     const renderFrameDispatcher = new RenderFrameDispatcher();
     this.scheduler = new Scheduler({ renderFrameDispatcher });
     this.buildOwner = new BuildOwner({
       onNeedVisualUpdate: () => this.scheduler.ensureVisualUpdate(),
     });
 
-    const rendererType =
+    this.rendererType =
       view.tagName.toLowerCase() === "canvas" ? "canvas" : "svg";
 
     this.renderPipeline = new RenderPipelineProvider({
       onNeedVisualUpdate: () => this.scheduler.ensureVisualUpdate(),
       renderContext: this.renderContext,
       hitTestDispatcher: new HitTestDispatcher(),
-    }).get(rendererType);
+    }).get(this.rendererType);
 
     this.scheduler.addPersistenceCallbacks(() => this.buildOwner.flushBuild());
     this.scheduler.addPersistenceCallbacks(() =>
@@ -68,9 +66,9 @@ export class AppRunner {
   runApp(widget: Widget): string {
     this.widget = widget;
     if (
-      this.viewSize == null ||
-      this.viewSize.width === 0 ||
-      this.viewSize.height === 0
+      this.renderContext.viewSize == null ||
+      this.renderContext.viewSize.width === 0 ||
+      this.renderContext.viewSize.height === 0
     )
       return "";
 
@@ -81,7 +79,9 @@ export class AppRunner {
       scheduler: this.scheduler,
     }).createElement();
     this.root.mount(undefined);
-    this.root.renderObject.constraints = Constraints.tight(this.viewSize);
+    this.root.renderObject.constraints = Constraints.tight(
+      this.renderContext.viewSize,
+    );
 
     this.didRun = true;
     this.draw();
@@ -94,7 +94,8 @@ export class AppRunner {
   }
 
   handleViewResize = (size: Size) => {
-    this.viewSize = size;
+    if (this.rendererType === "canvas") {
+    }
     if (this.didRun) {
       this.draw();
     } else {
diff --git a/packages/flitter/src/type/_types/text-painter.ts b/packages/flitter/src/type/_types/text-painter.ts
index 1c13468..a810839 100644
--- a/packages/flitter/src/type/_types/text-painter.ts
+++ b/packages/flitter/src/type/_types/text-painter.ts
@@ -1,6 +1,6 @@
 import type InlineSpan from "./Inline-span";
 import Utils, { assert, getTextWidth } from "../../utils";
-import type { SvgPaintContext } from "../../utils/type";
+import type { SvgPaintContext } from "../../framework";
 
 function getTextHeight({ fontSize }: { fontSize: number }) {
   return fontSize;
diff --git a/packages/flitter/src/utils/type.ts b/packages/flitter/src/utils/type.ts
index 22be06e..e7eb93c 100644
--- a/packages/flitter/src/utils/type.ts
+++ b/packages/flitter/src/utils/type.ts
@@ -1,9 +1,2 @@
-export type SvgPaintContext = {
-  createSvgEl: (tagName: keyof SVGElementTagNameMap) => SVGElement;
-  appendSvgEl: (el: SVGElement) => void;
-  insertSvgEl: (el: SVGElement, index: number) => void;
-  isOnBrowser: () => boolean;
-};
-
 export type VoidCallback = () => void;
 export type Nullable = undefined | null;
diff --git a/packages/story/src/Widget.svelte b/packages/story/src/Widget.svelte
index f92a627..8715871 100644
--- a/packages/story/src/Widget.svelte
+++ b/packages/story/src/Widget.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import Widget from '@meursyphus/flitter-svelte';
-	import Highlight, { LineNumbers } from 'svelte-highlight';
+	import Highlight from 'svelte-highlight';
 	import typescript from 'svelte-highlight/languages/typescript';
 	import codeStyle from 'svelte-highlight/styles/github-dark-dimmed';
+	export let renderer: 'svg' | 'canvas' = 'svg';
 	export let widget: any;
 	export let ssrSize: { width: number; height: number } = { width: 0, height: 0 };
 	export let width: string;
@@ -16,7 +17,7 @@
 </svelte:head>
 
 <div class="widget">
-	<Widget {widget} {width} {height} {ssrSize} />
+	<Widget {widget} {width} {height} ssr={{ size: ssrSize }} {renderer} />
 	<p class="size">
 		{width.replace('px', '')} × {height.replace('px', '')}
 	</p>
diff --git a/packages/story/src/stories/Container/Container.stories.ts b/packages/story/src/stories/Container/Container.stories.ts
index 6338a24..744ac86 100644
--- a/packages/story/src/stories/Container/Container.stories.ts
+++ b/packages/story/src/stories/Container/Container.stories.ts
@@ -223,3 +223,16 @@ export const WithClipDecoration: Story = {
 		code: ImportWidgetCode + WithClipDecorationCode
 	}
 };
+
+export const ColoredBoxOnCanvas: Story = {
+	args: {
+		ssrSize: { width: 600, height: 300 },
+		width: '600px',
+		height: '300px',
+		renderer: 'canvas',
+		widget: Container({
+			color: 'lightblue'
+		}),
+		code: ImportWidgetCode + Case1Code
+	}
+};
diff --git a/packages/story/src/stories/Opacity/Widget.stories.ts b/packages/story/src/stories/Opacity/Widget.stories.ts
index 385f7b1..bf0ff1d 100644
--- a/packages/story/src/stories/Opacity/Widget.stories.ts
+++ b/packages/story/src/stories/Opacity/Widget.stories.ts
@@ -149,3 +149,39 @@ export const Nest: Story = {
 		})
 	}
 };
+
+export const NestOnCanvas: Story = {
+	args: {
+		renderer: 'canvas',
+		width: '400px',
+		height: '400px',
+		code:
+			dedent`import {  Container, Column, Opacity, Column } from '@meursyphus/flitter';'\n\n\n` +
+			NestCode,
+		widget: Column({
+			children: [
+				Opacity({
+					opacity: 0.5,
+					child: Container({
+						width: 400,
+						height: 60,
+						color: 'blue'
+					})
+				}),
+				Opacity({
+					opacity: 0.5,
+					child: Container({
+						child: Opacity({
+							opacity: 0.5,
+							child: Container({
+								width: 400,
+								height: 60,
+								color: 'blue'
+							})
+						})
+					})
+				})
+			]
+		})
+	}
+};