Forums » Help » Impact.js On offscreen Canvas

Is there a way i can start impact to an offscreen canvas.
And then paint it to two canvas elements?

Should be possible.. but you'd have to do a bit of tweaking as ig.main() is expecting a canvas ID which would mean it expects it to be in the DOM.

Changing ig.System so that it's not looking to the DOM but rather just pass in a canvas element sounds like a good place to start.

It is not that difficult if the two canvas have same width, height, and scale, just build your own logic to swap the canvas and context in the back of Impact -which won't notice- and you are done.
I've done it to render two ig.Game, then i mix the two canvas to make a transition from one screen to another (for example : from the title screen to the main game screen). It works ok.

If size and/or scale are different, you'll have to dig a little bit more into the code to see all properties you need to swap.

I solved it using just 2 canvas elements.

one is the main canvan and it is displayed on first screen.
Then I just draw the image data from the first canvas to the second canvas.
That allows me to scale (with the same ratio).

what i want to do now is call 2 inits

ig.main( '#game1', game1, 60, 500, 500, 1 );
ig.main( '#game2', game2, 60, 500, 500, 1 );

but they seam to overwrite themself

Impact is not built to run two games - and i couldn't blame it for that - but running a game is just 1- instantiating it, and 2- calling update and draw on each tick, so you might either change the run loop to handle an array of game, calling update and draw on each game each tick (and you'll have to add also some addGame/ removeGame method i guess).
the 1 canvas per game logic could be included in this run loop, in this case addGame will look like addGame(GameConstructorFunction, dedicatedCanvas), and you'll have to handle currentGame, an array of { gameInstance : , gameCanvas : }.
(not sure i'm clear here).

... Or... simple and dirty way, have game1 handling game2 : game1 instantiate game2 in its init, update game2 during its update, and draw game2 during its draw... why not for a quick test.

yeah i think two game on the same device is a bad idea.
Ended up with going for a main canvas with the game.

And then just update and draw the canvas img on the other canvas.
Works fine.

Haven't tried it on more performance heavy stuff yet. but it should hold up.
Now i just need to send the sound over to the other canvas ;-)