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