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!
HTML game programming
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.
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.
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)
Author
Thanks for your replies!
The reason I actually asked is because I was learning from this tutorial https://www.w3schools.com/graphics/tryit.asp?filename=trygame_movement_forward
And I noticed that if you double click the canvas the text in that page gets selected. That's of course not wanted
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/
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
