I am developing an application that is basically objects moving over a picture for example a map of a house and people moving in it so am trying to visualize that, the first way i thought of was using socket.io with a canvas and keep changing the location of the objects , but is that a bad practice considering that the canvas redraws it self every time something changes , what is the best appropriate way to implement this ?
-
2If it's simple I would suggest looking into SVG, otherwise you can use Canvas. Really all the browsers are optimized for Canvas at this point so there shouldn't be any performance issues.– zfrischMar 11, 2017 at 16:29
-
Canvas sounds like the best option for you. Most browsers support it well enough and besides, from my understanding, it was kinda designed for stuff like what you are trying to accomplish.– Angelos ChalarisMar 11, 2017 at 16:30
2 Answers
If it's simple I would suggest looking into SVG, otherwise you can use Canvas. Really all Browsers are optimized for Canvas using requestAnimationFrame
at this point so there shouldn't be any performance issues with your refresh rate.
-
@HasanAl-Natour you can look at p5.js, but honestly vanilla for this isn't a far-fetched idea.– zfrischMar 13, 2017 at 14:59
HTML5's canvas should be ok with a redraw every 50 ms
Edit, my answer was longer but idk why a big part is missing:
You should use some canvas with transparency for macro areas
And then clean only the piece of canvas that changes and then redraw it while checking it every 50 ms
It should be fast and well supported