ujs/src/js/scene.js

import { Pointer } from './pointer.js';

export class Scene {
  #canvas;
  #context;
  #scene;

  constructor(canvas, context, width, height) {
    this.#canvas = canvas;
    this.#context = context;
    this.init(width, height);
  }

  init = async (width, height) => {
    this.setScreenSize(width, height);
  }

  #clearCanvas() {
    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.fillRect(0, 0, this.#canvas.width, this.#canvas.height);

    // draw border
    this.#context.strokeStyle = '#8bd0ba';
    this.#context.lineWidth = 1;
    this.#context.strokeRect(5, 5, this.#canvas.width - 10, this.#canvas.height - 10);

    // draw rect in center
    this.#context.fillStyle = '#d44e52';
    this.#context.fillRect(this.#canvas.width / 2 - 50, this.#canvas.height / 2 - 50, 100, 100);
  }

  setScreenSize(w, h) {
    this.#canvas.width = w;
    this.#canvas.height = h;
  }
}