54 lines
1.3 KiB
JavaScript
54 lines
1.3 KiB
JavaScript
// Background canvas
|
|
|
|
let bgCanvas;
|
|
let fgCanvas;
|
|
let bgCtx;
|
|
let fgCtx;
|
|
|
|
function initializeCanvas() {
|
|
initializeBackground();
|
|
initializeForeground();
|
|
fullscreen();
|
|
window.addEventListener('resize', fullscreen);
|
|
}
|
|
|
|
function initializeBackground() {
|
|
bgCanvas = document.createElement("canvas");
|
|
mainDiv.appendChild(bgCanvas);
|
|
bgCanvas.classList.add("fullscreen");
|
|
bgCanvas.classList.add("background");
|
|
bgCtx = bgCanvas.getContext("2d");
|
|
clearCanvas(bgCanvas, bgCtx);
|
|
}
|
|
|
|
function initializeForeground() {
|
|
fgCanvas = document.createElement("canvas");
|
|
mainDiv.appendChild(fgCanvas);
|
|
fgCanvas.classList.add("fullscreen");
|
|
fgCanvas.classList.add("foreground");
|
|
fgCtx = fgCanvas.getContext("2d");
|
|
clearCanvas(fgCanvas, fgCtx);
|
|
}
|
|
|
|
function clearCanvas(canvas, ctx) {
|
|
if (!canvas && !ctx) {
|
|
clearCanvas(bgCanvas, bgCtx);
|
|
clearCanvas(fgCanvas, fgCtx);
|
|
return;
|
|
}
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
if (ctx === bgCtx) {
|
|
bgCtx.fillStyle = '#ccc';
|
|
bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);
|
|
}
|
|
}
|
|
|
|
function fullscreen() {
|
|
const dim = {
|
|
width: document.documentElement.clientWidth,
|
|
height: document.documentElement.clientHeight,
|
|
};
|
|
Object.assign(bgCanvas, dim);
|
|
Object.assign(fgCanvas, dim);
|
|
}
|