44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
|
export class CanvasResizer {
|
||
|
|
/**
|
||
|
|
* Creates a new instance of `CanvasResizer` class.
|
||
|
|
* @param {Object} config - The configuration options for the class.
|
||
|
|
* @param {HTMLCanvasElement} config.canvas - The canvas element to resize.
|
||
|
|
* @param {number} config.width - The native width.
|
||
|
|
* @param {number} config.height - The native height.
|
||
|
|
* @param {number} config.percentage - The percentage of the screen size to use for the canvas.
|
||
|
|
*/
|
||
|
|
constructor({ canvas, width, height, percentage }) {
|
||
|
|
this.canvas = canvas;
|
||
|
|
this.width = width;
|
||
|
|
this.height = height;
|
||
|
|
this.percentage = percentage;
|
||
|
|
|
||
|
|
this.canvas.width = this.width;
|
||
|
|
this.canvas.height = this.height;
|
||
|
|
}
|
||
|
|
|
||
|
|
load() {
|
||
|
|
return new Promise((resolve) => {
|
||
|
|
["load", "resize"].map((item) =>
|
||
|
|
window.addEventListener(item, () => {
|
||
|
|
this._resize();
|
||
|
|
if (item === "load") {
|
||
|
|
resolve();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
_resize() {
|
||
|
|
let canvasWidth = Math.floor(window.innerWidth * this.percentage);
|
||
|
|
let canvasHeight = Math.floor(canvasWidth / (this.width / this.height));
|
||
|
|
if (canvasHeight >= window.innerHeight * this.percentage) {
|
||
|
|
canvasHeight = Math.floor(window.innerHeight * this.percentage);
|
||
|
|
canvasWidth = Math.floor(canvasHeight / (this.height / this.width));
|
||
|
|
}
|
||
|
|
this.canvas.style.width = canvasWidth + "px";
|
||
|
|
this.canvas.style.height = canvasHeight + "px";
|
||
|
|
}
|
||
|
|
}
|