Canvas Element-Position of Phaser Game using Blaze js in Meteor [solved]

help
1

I am failing to give the canvas created by Phaser 3.55 a declared position inside the html of my multi-paged Meteor 2.8.0 Application. My goal is to take an existing

-Element and let Phaser built it in there. I’m using the Blaze Js OnCreated() function to create the game:

Template.instance_map.onCreated(function() {

  var config = {
    type: Phaser.AUTO,
    parent: 'gameWrapper',
    domCreateContainer: true,
    width: 800,
    height: 600,
    scene: {
    preload: preload,
    create: create,
    update: update
    },
    };
    
    var game = new Phaser.Game(config);
 
function preload () { ... }
    
function create () { ... }
    
});

Then I create the instance_map-template in another template “A”. Outcome: It gets created above all other html-files in template “A”.

I tried the parent-field in the config-object:

  var config = {
    type: Phaser.AUTO,
  **parent: 'gameWrapper',**
    domCreateContainer: true,
    width: 800,
    height: 600,
    scene: {
    preload: preload,
    create: create,
    update: update
    },
    };

Then creating a div with an ID “gameWrapper”. I expected the Canvas to appear inside the div#gameWrapper. Outcome: It didn’t change anything.

I also tried the domCreateContainer-field to test if this would create a div around the canvas at all. It didn’t.

I hope someone can help me, thanks in advance

2

The solution is the put the game canvas inside the onRendered-Function, no onCreated-Function.

Thanks to winner_joiner and on stackoverflow.