This is confusing. The author could explain what should be done instead.
Even if it was an svg drawing a circle, the render engine will treat as it was a square because of the canvas, which is always an square.
In fact rotating an element can overlap bounds, forcing to redraw all the elements around it, causing an extra work. That could easily be solved with an format with animation support (gif, svg, av1, webm...)
Animated gifs have been optimized to an absurd degree for decades. For achieving high-performance animations, this is what I'd try. Then benchmark real-world performance.
Comments
This is confusing. The author could explain what should be done instead. Even if it was an svg drawing a circle, the render engine will treat as it was a square because of the canvas, which is always an square. In fact rotating an element can overlap bounds, forcing to redraw all the elements around it, causing an extra work. That could easily be solved with an format with animation support (gif, svg, av1, webm...)
Animated gifs have been optimized to an absurd degree for decades. For achieving high-performance animations, this is what I'd try. Then benchmark real-world performance.