AethelmE, HTML5 Game Engine with Multiple Canvas Elements

Main Article Content

Kevin Gunawan
Raymond Bahana


Game engine is software which ease the game development. As the processor power technology evolved and the HTML5 (HyperText Markup Language 5) specification are developed, browsers nowadays can natively (without any need for external plug-in) display animations and multimedia files (audio and video) using JavaScript as the programming language. Some of the features which are used in this research are HTML5‘s canvas and audio elements. The problem is that none of the existing free HTML5 game engines is able to support multiple canvas elements. This research will create a game engine, called AethelmE, which support multiple canvas elements as its unique feature. This game engine is also able to support sprite transformation, browsers compatibility, external asset loading, and audio format compatibility. This research successfully resulted in creating an HTML5 game engine which supports multiple canvas elements. It also supports all the scopes, with a small exception on sound format compatibility. Moreover, this research conducted a performance comparison testing of multiple HTML5 game engines, from which can be concluded that multiple canvas elements does not give significant performance gain compared to a single canvas.


Plum Analytics

Article Details



T.N.Sharma, P.Bhardwaj and M.Bhardwaj. (2012, Sept.). Differences between HTML and HTML5. International Journal of Computational Engineering Research. [Online]. 2(5), pp. 1430-1437. Available:

B.Smus. (2011, Aug.). Improving HTML5 canvas performance. HTML5 Rocks. [Online]. Available: canvas/performance/

J.Park, "Study of network game engine technology for distribute processing," M.S. thesis, Dankook University, Yongin, South Korea, 2008.

Unity. “Unity - Fast Facts”.

M.Teschner, S.Kimmerle, B.Heidelberger, G.Zachmann, L.Raghupathi, A.Fuhrmann, M.P.P.Cani, F.Faure, N.Magnenat-Thalmann, W.Strasser and P.Volino. 2005. Collision detection for deformable objects. Computer Graphics Forum [Online]. 24(1), pp. 61-81. Available:

G.van den Bergen, “Efficient collision detection of complex deformable models using AABB trees,” Journal of Graphics Tools, vol. 2, pp. 1-13, 1997.

S.Gottschalk, M.C.Lin and D.Manocha, “OBB-tree: a hierarchical structure for rapid interference detection,” Proceedings of SIGGRAPH, vol. 96, pp. 171-180, 1996

D.Geary, “Essentials,” in Core HTML5 Canvas — Graphics, Animation, and Game Development, Crawfordsville, IN: Prentice Hall, 2012, pp 17.

S.Fulton and J.Fullon, “Working with Audio, in HTML5 Canvas", 2nd ed. Sebastopol, CA: O’Reilly, 2013, pp 381-387.

E.Castro and B.Hyslop, “Introduction in HTML5 and CSS3", 7th ed., 2012, Berkeley, CA, Peachpit Press, 2012, pp xvi.

Crafty, “Crafty - Creating your first Crafty game”, 2010, [Online].



C. Martens, “lycheeJS - Getting Started: Setup lycheeJS-ADK”,

[Online]. Available:


J. Mordetsky, “Trafficcone”, 2012, Available: trafficcone

IBM Developer Works, Available: https :// com/developer works/ library wa-canvashtml5layering/