Can I put an HTML button inside the canvas?

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.

I don't believe you can 'put' HTML content inside a canvas tag. Whatever you put in there will actually be displayed if the browser doesn't support <canvas>.

You can, however, position your buttons absolutely over top of a canvas or render areas in your canvas that 'look' like buttons and handle the events yourself (a lot of work).

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