Simplify drawing to canvas

Author: coocos

src/canvas.ts

@@ -3,19 +3,32 @@ import { nodes, isLeaf, Node } from "./quadtree";
 export function initializeCanvas() {
   const canvas = document.getElementById("canvas") as HTMLCanvasElement;
   const scale = window.devicePixelRatio;
-  canvas.width = window.innerWidth * scale;
-  canvas.height = window.innerHeight * scale;
+  canvas.width = Math.floor(window.innerWidth * scale);
+  canvas.height = Math.floor(window.innerHeight * scale);
   const context = canvas.getContext("2d") as CanvasRenderingContext2D;
   context.scale(scale, scale);
+
   return {
-    canvas,
-    context,
+    draw: (tree: Node) => {
+      clear(context, canvas.width, canvas.height);
+      for (let node of nodes(tree)) {
+        drawNode(context, node);
+        drawPoints(context, node);
+      }
+    },
+    width: canvas.width / scale,
+    height: canvas.height / scale,
+    element: canvas,
   };
 }
 
-export function clearCanvas(context: CanvasRenderingContext2D) {
+function clear(
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number
+) {
   context.fillStyle = "#eee";
-  context.fillRect(0, 0, window.innerWidth, window.innerHeight);
+  context.fillRect(0, 0, width, height);
 }
 
 function drawNode(context: CanvasRenderingContext2D, node: Node) {
@@ -35,11 +48,3 @@ function drawPoints(context: CanvasRenderingContext2D, node: Node) {
     }
   }
 }
-
-export function draw(tree: Node, context: CanvasRenderingContext2D) {
-  clearCanvas(context);
-  for (let node of nodes(tree)) {
-    drawNode(context, node);
-    drawPoints(context, node);
-  }
-}

src/index.ts

@@ -1,7 +1,7 @@
 import { insert, construct } from "./quadtree";
-import { draw, initializeCanvas } from "./canvas";
+import { initializeCanvas } from "./canvas";
 
-const { canvas, context } = initializeCanvas();
+const canvas = initializeCanvas();
 
 const points = Array.from({ length: 256 }, () => {
   return {
@@ -17,13 +17,12 @@ let tree = construct(points, {
   height: canvas.height,
 });
 
-draw(tree, context);
-canvas.addEventListener("click", (event) => {
-  const { left, top } = canvas.getBoundingClientRect();
+canvas.draw(tree);
+canvas.element.addEventListener("click", (event) => {
   const point = {
-    x: event.clientX - left,
-    y: event.clientY - top,
+    x: event.clientX,
+    y: event.clientY,
   };
   tree = insert(tree, point);
-  draw(tree, context);
+  canvas.draw(tree);
 });

src/styles.css

@@ -3,4 +3,8 @@
 }
 body {
     margin: 0;
+}
+#canvas {
+    width: 100vw;
+    height: 100vh;
 }