I have a need for my html5 game (using melonjs) to allow users to click tile areas on the map. The idea is it will show a css styled hover area. The browser tested is chrome.

I could do this natively in the game engine but the styling options available for canvas entities is limited. So I went with creating a dom element for each item in the canvas map. As the player moves, I update only the positions of the dom elements which are on the viewport.

Probably 70 total elements are created and only 2-3 are on the screen updating at any given time.

I'm pretty surprised how slow it's making my browser.

So my questions are:

• why would updating 2-3 elements as the player moves be so slow?

• is it better to remove elements when offscreen then readd when they are back on, even though they arent updating as they move off screen?

• should I just scrap the dom solution altogether and rely on the api the canvas and game engines provide for styling