Pre-rendered graphic elements?

[Olle]

Greetings! I'm new to phaser.

I am trying to figure out how to port a game made in my own engine. I made frequent use of static backgrounds/foregrounds made up of loads of graphic elements such as linear and radial gradient rectangles and circles. These where pre-rendered once onto two off-screen canvases that later was drawn onto the main canvas in the render loop.

 

I'm sure this is not an optimal setup, but it's a lightweight game. Runs great on the homebrewn engine cross platforms, so I can't imagine it would do worse with phaser.

 

What would be the best way to mimic this setup for webGL compatability, without having to recreate the graphics with images? I've browsed some zombie-threads about RenderTexture and BitmapData, but i'm still somewhat lost. Would appreciate your input.