AethelmE: HTML5 Game Engine with Multiple Canvas Elements

AethelmE functions as a specialized HTML5 game engine prototype engineered to explore the architectural potential of utilizing multiple canvas elements for 2D rendering. By employing a modular framework centered on the AE.DisplayList class for object management and the AE.Stage class for rendering and input handling, the engine provides a structured environment for managing composite sprites and diverse asset resources. The project aims to determine whether decoupling rendering layers into distinct viewports can alleviate performance bottlenecks common in traditional single-canvas game engines.

The research encompasses a comprehensive evaluation of cross-browser compatibility and system efficiency, focusing on CPU and GPU utilization across various game states. While the engine successfully achieves functional sprite rendering, text display, and input management, testing reveals notable inconsistencies in audio implementation via the AE.Sound class across different browser environments. These findings highlight the challenges of maintaining uniform performance and feature parity in the fragmented landscape of modern web browsers.

Ultimately, the performance benchmarks demonstrate that the use of multiple canvas elements does not yield a significant advantage over established single-canvas architectures. Comparative analysis indicates that existing engines often achieve superior stability and efficiency without the added complexity of managing multiple drawing viewports. Consequently, the number of canvas elements is not a primary driver of rendering performance, suggesting that developers should prioritize optimized draw calls and efficient resource management over architectural layering strategies when building high-performance HTML5 games.