Why does the game lag, will the canvas save if you use animated SVG in it?

Question

JavaScript

isc.96.lt/t/gam/mar
Actually it is felt that the game slows down and does not go smoothly.
I'm thinking of using canvas instead of the usual html layout.
But in the canvas I think to use the same svg animated elements.
This kind of animation svg:

If I use canvas, will it save the situation, and what are the mistakes?

Answer 1

Canvas for raster graphics, not for SVG. Vector graphics will need to be converted to bitmap sprites before they can be used on canvas. But your problem is not in the way graphics are displayed, but in the way the ticks of the main loop are counted. To organize the cycle, use https://developer.mozilla.org/ru/docs/DOM/window.r... . A slightly more detailed description: html5.by/blog/what-is-requestanimationframe .

Answer 2

setTimeout does not need to be combined with raf, but in general you can’t make a performance game on SVG.
canvas works with a raster, the same will not work.
For canvas, of course, try pixi and pixi-spine