42 lines
1.0 KiB
JavaScript
42 lines
1.0 KiB
JavaScript
import { Pointer } from './pointer.js';
|
|
|
|
export class Scene {
|
|
constructor(width, height) {
|
|
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);
|
|
}
|
|
|
|
run() {
|
|
// clear canvas
|
|
this.#clearCanvas();
|
|
|
|
// 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;
|
|
}
|
|
}
|