Jump to content

How can I include DOM elements inside of Phaser?


Recommended Posts

Hey guys! I was wondering how to include DOM elements inside a Phaser canvas, since I am using jscolor to try and include a color picker in my game. If I just use a DOM element outside a game, there are forseeable scaling problems, since I want to try to get it on mobile, and it will be very problematic unless it is part of the canvas. Thank You So Much! Also, if you have an alternative color picker using Canvas, please post about it!

Link to comment
Share on other sites

Pretty sure you can't, Phaser works within canvas element and renders all the stuff right into it, or in other words, none of the stuff it renders are an actual DOM elements - there's only canvas.

But, with some clever CSS, you can implement scalable divs outside of the game canvas. Some of the latest additions include "calc( )" which works exactly as you'd expect, and "vw" and "vh", which stand for "viewport width" and "viewport height" respectively.

Link to comment
Share on other sites

17 hours ago, 0penS0urce said:

there are forseeable scaling problems, 

All you need to do is create an HTML UI layer that's positioned over the Phaser canvas (using CSS relative and absolute positioning) and scale it to the same ratio as your Phaser canvas.

I use this scale function:


... apply it to both your Phaser canvas and HTML layer.

Here's an example of how this works in general with the Hexi engine - you'll have to adapt the specifics for Phaser:


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...