Can I place canvas inside img tag using Phaser

Question

I have static content for a game and I decided use css3 div techniques of centring my content image and put canvas inside, like this (.css file):

/* ###### GAME ##### */
.game-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.game-content {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

And html part:

<div class="game-container">
    <img id="gameCanvas" class="game-content" src="content-v2.png">
</div>

Then I create the Phaser game instance using img's tag with id="gameCanvas". The canvas element appears under img tag, with proper sizes but I cannot place any sprite on the canvas.

Is there any better solution on my case or why it doesn't work this way?

Kamen Minkov Kamen Minkov · Accepted Answer · 2015-09-24T15:16:17

You can't expect to have a canvas element inside an img element; the usual approach is to have a[n empty] div and pass its id to the Phaser.Game constructor. You'd better add an id to the div and remove the image manually when creating the game.

Can I place canvas inside img tag using Phaser

1 Answers