How can you position a HaxeFlixel canvas in the centre of a chrome window?

Question

At the moment, I'm learning HaxeFlixel, and I can centre the text in the canvas, but i can't position the canvas in the centre of chrome the chrome window. Is there a way to do it and Main.hx?

PlayState.hx :

package;

import flixel.FlxG;
import flixel.FlxState;
import flixel.text.FlxText;

class PlayState extends FlxState
{
    override public function create()
    {
        super.create();

        var text = new FlxText(0, 0, 0, "Hello World\n", 64);
        text.screenCenter();

        add(text);
    }

    override public function update(elapsed:Float)
    {
        super.update(elapsed);
        enterFullscreen();
    }

    public function enterFullscreen()
    {
        if (FlxG.keys.justPressed.ENTER)
        {
            FlxG.fullscreen = !FlxG.fullscreen;
        }
    }
}

Main.hx :

package;

import flixel.FlxGame;
import openfl.display.Sprite;

class Main extends Sprite
{
    public function new()
    {
        super();
        addChild(new FlxGame(0, 0, PlayState));
    }
}

Please help, Thanks.

Answer 1

When you compile an HaxeFlixel project for the web, there are two parts: all the Haxe code is converted to Javascript, executing inside a <canvas> HTML object; all the rest of the HTML page is taken from a template, and you need to change that to center your canvas or otherwise add other elements on the side.

The default template that HaxeFlixel uses is inside the Lime project: https://github.com/openfl/lime/blob/develop/templates/html5/template/index.html

You need to copy that file inside your project, for example in assets/index.html; then customize it, for example adding the <center> tag around <div id="content"></div> (the div where your game canvas will be placed):

<center>
<div id="content"></div>
</center>

You can use CSS to center it, too, if you're so inclined. Just be careful touching the lines with :: as those are template directives. With your new template placed in assets/index.html, add this line inside project.xml:

<template path="assets/index.html" />