Rendering directly to a secondary canvas

[Preece]

In my game, I am hiding the primary phaser canvas, and the creating a new one that the hidden canvas is rendered to each frame. This is for two reasons: ensure crisp rendering of the pixel art in the game, and allow sub-pixel movement of the camera by offsetting the render amount. This all works fine. The problem is with UI overlay elements. Because the UI elements are rendered to the primary canvas, their position can only be in unscaled pixel coordinates. This leads the UI to be jittery, because the camera can move sub-pixels, while the UI can not. The solution I would prefer for this, would be some method to render the UI elements directly to the scaled canvas, instead of the hidden, unscaled canvas. Then, I would just use pre-scaled versions of the UI for whatever scale factor the user chose.

 

To put in simpler terms, is there a way to have an element render to a canvas other than the one specified by the game?

[tips4design]

Well, how do you render your canvas onto the another canvas? You can use the same method to render the image onto another canvas.

[rich]

You'll need to override the 'render' method of your UI components and get them to redirect the render to a different canvas. You could do this by changing the context property of the renderSession object they are passed.

[Cudabear]

How are you making your UI elements?  If they're sprites, can't they be positioned with subpixels?  At least, in my experience this seems to be the case.

[Preece]

Thanks for the responses everyone. I am using both solutions, what tips4design and Rich suggested. In the render function, I am drawing the UI elements from the cache and then drawing them scaled up to the secondary canvas. For the bitmap text, I am going to retarget its render call.