59 lines
1.5 KiB
JavaScript
59 lines
1.5 KiB
JavaScript
import { Base } from "./base.js";
|
|
|
|
export class Canvases extends Base {
|
|
bgCanvas;
|
|
fgCanvas;
|
|
bgCtx;
|
|
fgCtx;
|
|
|
|
setMain(main) {
|
|
this.main = main;
|
|
}
|
|
|
|
initialize() {
|
|
this.initializeBackground();
|
|
this.initializeForeground();
|
|
this.fullscreen();
|
|
window.addEventListener('resize', () => this.fullscreen());
|
|
}
|
|
|
|
initializeBackground() {
|
|
this.bgCanvas = document.createElement("canvas");
|
|
this.main.div.appendChild(this.bgCanvas);
|
|
this.bgCanvas.classList.add("fullscreen");
|
|
this.bgCanvas.classList.add("background");
|
|
this.bgCtx = this.bgCanvas.getContext("2d");
|
|
this.clear(this.bgCanvas, this.bgCtx);
|
|
}
|
|
|
|
initializeForeground() {
|
|
this.fgCanvas = document.createElement("canvas");
|
|
this.main.div.appendChild(this.fgCanvas);
|
|
this.fgCanvas.classList.add("fullscreen");
|
|
this.fgCanvas.classList.add("foreground");
|
|
this.fgCtx = this.fgCanvas.getContext("2d");
|
|
this.clear(this.fgCanvas, this.fgCtx);
|
|
}
|
|
|
|
clear(canvas, ctx) {
|
|
if (!canvas && !ctx) {
|
|
this.clear(this.bgCanvas, this.bgCtx);
|
|
this.clear(this.fgCanvas, this.fgCtx);
|
|
return;
|
|
}
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
if (ctx === this.bgCtx) {
|
|
this.bgCtx.fillStyle = '#ccc';
|
|
this.bgCtx.fillRect(0, 0, this.bgCanvas.width, this.bgCanvas.height);
|
|
}
|
|
}
|
|
|
|
fullscreen() {
|
|
const dim = {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
};
|
|
Object.assign(this.bgCanvas, dim);
|
|
Object.assign(this.fgCanvas, dim);
|
|
}
|
|
} |