I'm creating an HTML5 game using Canvas, but want to use DOM for the GUI for the reasons mentioned in there articles:

That being said, we have a component on the GUI that needs to be animated which will be through a sprite. Is it possible to render sprite animations through a DOM element?

  • 1
    \$\begingroup\$ Your question is just about displaying an animated image sequence in an HTML element? Does this require input from a game developer? Or would a web developer be able to answer this? There are a lot more of the latter, so asking this (or searching for existing Q&A) on StackOverflow might get you answers faster. ;) \$\endgroup\$
    – DMGregory
    Commented Feb 26, 2018 at 2:50
  • \$\begingroup\$ @DMGregory fair, but I figured this domain knowledge falls under a game developer creating web games \$\endgroup\$
    – user3871
    Commented Feb 26, 2018 at 3:29
  • \$\begingroup\$ @Growler It doesn't seem not on-topic here, I think the point is that you might get faster feed back there by virtue of the significantly larger user base as there are more HTML5 developers than there are HTML5 game developers. It's fine to leave it here provided you don't cross-post it. \$\endgroup\$
    – Pikalek
    Commented Feb 26, 2018 at 4:13
  • \$\begingroup\$ @Pikalek I posted on SO, so I'll remove here \$\endgroup\$
    – user3871
    Commented Feb 26, 2018 at 4:19

1 Answer 1


Yes. Your options are:

  1. use a (second, small) <canvas>, and draw your animations to that
  2. use an <img> or background-image (e.g. on a <div>) and use Javascript to update which image is displayed on a timer
  3. use a no-JS solution using CSS animation steps()
  4. encode an animated gif for each animation you want to display and just point an <img> to the appropriate one

Option 1 is the most versatile: for example, you could render live thumbnails of in-game scenes to your UI, or 3d spinning images of items.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .