fix(renderer): derive backing size from viewport state

renderer/renderer.ts

@@ -8,7 +8,6 @@ export type RenderFrame = {
 
 export type ImageRenderer = {
   render(frame: RenderFrame): void;
-  resize(width: number, height: number): void;
   dispose(): void;
 };
 
@@ -25,16 +24,16 @@ export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBacke
   }
 
   return {
-    render() {
+    render(frame) {
-      context.viewport(0, 0, canvas.width, canvas.height);
+      const { w, h } = frame.editor.viewport.size;
+
+      if (canvas.width !== w) canvas.width = w;
+      if (canvas.height !== h) canvas.height = h;
+
+      context.viewport(0, 0, w, h);
       context.clearColor(0, 0, 0, 0);
       context.clear(context.COLOR_BUFFER_BIT);
     },
-    resize(width, height) {
-      canvas.width = width;
-      canvas.height = height;
-      context.viewport(0, 0, width, height);
-    },
     dispose() {},
   };
 }

view/CanvasViewport.tsx

@@ -17,8 +17,6 @@ export function CanvasViewport({ store }: CanvasViewportProps) {
 
       const width = Math.floor(entry.contentRect.width);
       const height = Math.floor(entry.contentRect.height);
-      canvas.width = width;
-      canvas.height = height;
       store.dispatch("viewport.setSize", { w: width, h: height });
     });