javascript - Can I put an HTML button inside the canvas?

Question

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?

question from:https://stackoverflow.com/questions/4797748/can-i-put-an-html-button-inside-the-canvas

Answer 1

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%;
}