I want to make the buttons for the game I'm making as real HTML buttons, but they need to be inside the canvas.
How would I go about doing this?
Because browsers will display either a canvas element or HTML controls that you put inside that element, but not both, you must place your controls outside of your canvas elements. To make it appear as though HTML controls are inside a canvas, you can use CSS to place the controls above the canvas.
The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.
Given that the canvas element has a transparent content model, it may contain fallback elements which are displayed in the event that the canvas
element is unsupported. They will not be displayed if the canvas is supported.
You can position HTML elements relative to the canvas' parent to have the buttons "hovering" over the canvas. A menu element could be an appropriately semantic element to render a list of controls, depending on the context:
HTML:<div id="container"> <canvas id="viewport"> </canvas> <menu id="controls"> </menu> </div>
CSS:#container { height: 400px; position: relative; width: 400px; } #viewport { height: 100%; width: 100%; } #controls { bottom: 0; left: 0; position: absolute; width: 100%; }
You can put the button on top of the canvas
by giving the canvas a z-index
which is lower than the z-index
of the button:
<canvas style="z-index:1"></canvas> <input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/>
where x
and y
are numbers.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With