0

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 ?

2
  • 2
    If 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.
    – zfrisch
    Mar 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. Mar 11, 2017 at 16:30

2 Answers 2

1

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.

1
  • @HasanAl-Natour you can look at p5.js, but honestly vanilla for this isn't a far-fetched idea.
    – zfrisch
    Mar 13, 2017 at 14:59
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.