Sadly, that's currently not possible. Both visualizers are rendered to the same <canvas> element in the HTML. And the perspective is applied to the <canvas> element.

I tried applying perspective when drawing the visuals themselves, but since it's a 2D context, the only things I can do is using vertical/horizontal tilt and scale. This isn't real 'perspective' but just a cheap mimic. ( And it kinda looks weird )

The easiest way to fix it would be to give each Visual their own <canvas> element to be drawn onto, but this would be a major performance issue. Because currently there are 2 canvasses ( background + visuals ) The background is currently rendered at 30FPS, while the foreground can be specified to match Wallpaper Engine's settings ( 60FPS for example ).

If I'd split them into 2 sperate canvasses, your PC would have to render 3x ( screen resolution ) canvasses each frame. Which will give many users performance issues.

TL:DR;

Currently not possible, looking for a good solution, because the easy solution is a performance killer, and drawing in perspective looks crap, because it's not real 3D.

@Arthesian modify the css perspective attribute during rendering. Are you drawing on the animation frame or using setTimeout?

@Oscar...yes, I already do that. (using CSS for the transformation )

The problem is both visuals are drawn onto the same canvas element ;) Like I explained in my previous post.... Doesn't matter if I use the animation frame or setTimeout ( irrelevant in this case? )

Splitting all visuals to their own canvas, would kill performance into oblivion

The only solution I can think of, is having 2 canvasses ( like I do now ), and Enabling perspective on one of them. Then selectively render items to different canvasses based on if perspective should be applied.

This will cause lots of rework though, because other effects ( like glow, blur, hue-shift etc. ) are also canvas-based :P So you would get a tight coupling between certain effects.