Jump to content
  • Advertisement

Recommended Posts

Hi

I'm planning to do some HTML game programming with javascript. My question is can you mix the canvas rendering and HTML text/buttons well enough? I don't mean to draw them on top of each other but side by side. How well that works?

thanks!

 

Share this post


Link to post
Share on other sites
Advertisement

As far as I know, the 'canvas' element is just an element, and can be used alongside other elements in the usual way. I've done this myself, and have seen it done elsewhere.

I searched for 'html canvas demo' and found this:

http://www.effectgames.com/demos/canvascycle/

Which seems to be an example of doing what you describe. I saw other such examples as well.

I will mention that although you can certainly do it this way if you want, it's typical for games to be 'self contained' with respect to UI, meaning in this case that all UI would be drawn and interacted with in the canvas itself.

Share this post


Link to post
Share on other sites

Certainly put ordinary HTML input elements in the same page as canvas element(s). It works fine. (My main example: https://www.myforest.uk ).

You may well want users to touch, click or drag things in the canvas but if you try to replicate HTML controls such as text input, check boxes or drop-down lists within canvases you would just be making life unnecessarily difficult for yourself.

Share this post


Link to post
Share on other sites

I'm not sure why you are creating a distinction between overlapping and side-by-side. The canvas is just another HTML element, you can intermix it with all others at will. Even IE11 and iOS Safari support canvasses with an alpha channel, letting you compose canvas graphics overtop of other HTML content and see them through the transparent holes in it.

One big gotcha, however, is that it can be ludicrously hard to detect the difference between resolution and DPI in a device- and browser-independent way, so make sure all your HTML is composed in screen-space coordinate systems like Points (pt) or View% (vw, vh). iPads especially will report an HTML document size in "pixels", but the true pixel resolution of the screen is 2 to 6 times larger than what the DOM will tell you, so your HTML text will be super-crisp overtop of low-resolution Canvas drawings if you're not careful.

 

I created this slideshow+quizzing system at my job; we create training presentations like this which are used by tens of thousands of people every year who need to take safety and regulatory compliance training for their employers. Note in particular the quiz (made out of normal HTML text and controls, over a canvas background, and with another canvas for the interactive elements in the foreground).

https://www.praxistech.com/media/qa/tolko/ems/player.html

(note also that this particular instance of it is a rather old version of the system, last updated mid-2017; it has problems in IE11 and Firefox which newer versions of the software do not)

Share this post


Link to post
Share on other sites

To get a different perspective on JavaScript in HTML5 pages (mixing canvas and other elements) you may ike to look at https://www.grelf.net/jscourse/index.html

My home page (grelf.net) also links to other examples that I have converted to HTML5/JavaScript from some of my earlier programs in C++, Java, etc.

Are you aware that there is another game developers' web site specifically for HTML5.JavaScript? See http://www.html5gamedevs.com/forum/2-coding-and-game-design/

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!