restruct scene

src/js/app.js

@@ -4,7 +4,10 @@ import { Pointer } from './pointer.js';
 
 export class App {
   constructor(w, h) {
-    this.scene = new Scene(w, h);
+    this.canvas = document.querySelector('canvas');
+    this.context = this.canvas.getContext('2d');
+
+    this.scene = new Scene(this.canvas, this.context, w, h);
     this.prevTime = Date.now();
 
     Pointer.init();

src/js/scene.js

@@ -1,41 +1,47 @@
 import { Pointer } from './pointer.js';
 
 export class Scene {
-  constructor(width, height) {
+  #canvas;
+  #context;
+  #scene;
+
+  constructor(canvas, context, width, height) {
+    this.#canvas = canvas;
+    this.#context = context;
     this.init(width, height);
   }
 
   init = async (width, height) => {
-    this.canvas = document.querySelector('canvas');
-    this.context = this.canvas.getContext('2d');
-
     this.setScreenSize(width, height);
   }
 
   #clearCanvas() {
-    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    this.#context.clearRect(0, 0, this.#canvas.width, this.#canvas.height);
   }
 
   run() {
     // clear canvas
     this.#clearCanvas();
+    this.#scene();
+  }
 
+  #scene() {
     // fill canvas
-    this.context.fillStyle = '#523c4e';
+    this.#context.fillStyle = '#523c4e';
-    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    this.#context.fillRect(0, 0, this.#canvas.width, this.#canvas.height);
 
     // draw border
-    this.context.strokeStyle = '#8bd0ba';
+    this.#context.strokeStyle = '#8bd0ba';
-    this.context.lineWidth = 1;
+    this.#context.lineWidth = 1;
-    this.context.strokeRect(5, 5, this.canvas.width - 10, this.canvas.height - 10);
+    this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);
 
     // draw rect in center
-    this.context.fillStyle = '#d44e52';
+    this.#context.fillStyle = '#d44e52';
-    this.context.fillRect(this.canvas.width / 2 - 50, this.canvas.height / 2 - 50, 100, 100);
+    this.#context.fillRect(this.#canvas.width / 2 - 50, this.#canvas.height / 2 - 50, 100, 100);
   }
 
   setScreenSize(w, h) {
-    this.canvas.width = w;
+    this.#canvas.width = w;
-    this.canvas.height = h;
+    this.#canvas.height = h;
   }
 }