Improve render call by limit render calls to visible elements

engine/Viewport.ts

@@ -8,6 +8,12 @@ export type Viewport = {
 	canvas: HTMLCanvasElement;
 	gameContainer: HTMLElement;
 	canvasContainer: HTMLElement;
+	bounds: {
+		minX: number;
+		minY: number;
+		maxX: number;
+		maxY: number;
+	};
 };
 
 export const viewport: Viewport = {
@@ -21,6 +27,12 @@ export const viewport: Viewport = {
 	canvas: null as unknown as HTMLCanvasElement,
 	gameContainer: null as unknown as HTMLElement,
 	canvasContainer: null as unknown as HTMLElement,
+	bounds: {
+		minX: 0,
+		minY: 0,
+		maxX: 0,
+		maxY: 0,
+	},
 };
 
 export function initViewport(): void {
@@ -51,16 +63,18 @@ export function setScale(scale: number): void {
 
 export function resizeCanvas(width: number, height: number): void {
 	const {
-		scale: initialScale,
+		scale,
 		imageSmoothing,
 		ctx,
 		canvas,
 		canvasContainer,
 		gameContainer,
+		translation,
+		bounds,
 	} = viewport;
 
-	const containerWidth = (gameContainer.offsetWidth / initialScale) | 0;
-	const containerHeight = (gameContainer.offsetHeight / initialScale) | 0;
+	const containerWidth = (gameContainer.offsetWidth / scale) | 0;
+	const containerHeight = (gameContainer.offsetHeight / scale) | 0;
 
 	canvas.width = Math.min(width, containerWidth);
 	canvas.height = Math.min(height, containerHeight);
@@ -68,12 +82,15 @@ export function resizeCanvas(width: number, height: number): void {
 	ctx.imageSmoothingEnabled = imageSmoothing.imageSmoothingEnabled;
 	ctx.imageSmoothingQuality = imageSmoothing.imageSmoothingQuality;
 
-	const canvasWidth =
-		canvas.width * initialScale - (containerWidth % initialScale);
-	const canvasHeight =
-		canvas.height * initialScale - (containerHeight % initialScale);
+	const canvasWidth = canvas.width * scale - (containerWidth % scale);
+	const canvasHeight = canvas.height * scale - (containerHeight % scale);
 
 	canvasContainer.style = `width: ${canvasWidth}px; height: ${canvasHeight}px;`;
+
+	bounds.minX = translation.x;
+	bounds.minY = translation.y;
+	bounds.maxX = translation.x + canvas.width;
+	bounds.maxY = translation.x + canvas.height;
 }
 
 export function resetCtx() {