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?

zzzzBov · Accepted Answer · 2014-01-16T22:06:02.643

52

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

edited Jan 16 '14 at 22:06

answered Jan 25 '11 at 19:23

zzzzBov

174,988
54
320
367

1

Using `menu` is not necessary. You can display almost any HTML element over canvas this way. – Martin Pecka Jan 15 '14 at 22:40
7

@peci1, I chose `` for this case because it was semantic, not because it does anything special with regard to ` – zzzzBov Jan 16 '14 at 14:29
But when i put the canvas in full-screen, the buttons disappears. Is there any way to overcome this? – Sophile Sep 09 '21 at 15:29

score 13 · Answer 2 · edited Jan 10 '14 at 06:05

13

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.

edited Jan 10 '14 at 06:05

Martin Thoma

124,992
159
614
958

answered Jan 26 '11 at 08:50

Alex

1,068
8
23

1

I found that this worked in chrome, but for firefox I had to give the canvas a negative z-index. – skorulis May 23 '11 at 13:01

score 7 · Answer 3 · edited Jun 01 '14 at 03:00

7

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).

edited Jun 01 '14 at 03:00

Peter Mortensen

30,738
21
105
131

answered Jan 25 '11 at 19:16

Paul Spencer

1,355
1
8
16

3

You mean whatever you put inside canvas _element_ (not tag) ;) – kangax Jan 26 '11 at 13:49

score 5 · Answer 4 · answered Jan 25 '11 at 19:16

5

HTML inside canvas is not possible, but maybe you could position your elements absolutely so that they are "floating" over the canvas, but not inside it.

answered Jan 25 '11 at 19:16

sidyll

57,726
14
108
151

score 1 · Answer 5 · answered Apr 06 '16 at 01:43

One way to add button dynamically on the top of the canvas is following the next two points: 1. Making zIndex of the button higher than canvas 2. Position the button using absolute positioning with desired top and left value

Jsfiddle: https://jsfiddle.net/n2EYw/398/

HTML:

<canvas id="canvas" width="200" height="200">           
 </canvas>

CSS:

canvas {
    border: 1px dotted black;
    background: navy;
}

JavaScript:

var $testButton = $('<input/>').attr({
    type: 'button',
    name: 'btn1',
    value: 'TestButton',
    id: 'testButton',
    style: 'position:absolute; top:50px;left:100px; zindex:2'
});
$('body').append($testButton);
$(document).on("click", "#testButton", function() {
    alert('button clicked');
});

Hey you added button inside HTML not in canvas. – Devang Hingu Jul 19 '21 at 09:37 — Devang Hingu, Jul 19 '21 at 09:37

score 1 · Answer 6 · answered Jul 03 '19 at 03:23

You can use my DropdownMenu for put an HTML button or menu inside the canvas.

Example of code:

<div class="container" id="containerDSE">
    <canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );

dropdownMenu.create( [

    {

        name: 'Button',
        onclick: function ( event ) {

            var message = 'Button onclick';
            //console.log( message );
            alert( message )

        },

    },

], {

    elParent: elContainer,
    canvas: elCanvas,
    decorations: 'Transparent',

} );
</script>

Example of using.

score 0 · Answer 7 · answered Jan 25 '11 at 21:21

0

HTML inside of canvas is not possible.
But if you really want to use buttons, why don't you try positioning the buttons on top of the canvas?

answered Jan 25 '11 at 21:21

gion_13

41,171
10
96
108

score 0 · Answer 8 · answered May 14 '18 at 11:23

You can put a button inside the canvas (png, jpg, svg and text), using the Canvate library. http://www.sakuracode.com/canvate

Here you are a sample of a draging button inside the canvas.

container.startDrag();

https://codepen.io/EiseiKashi/pen/BxNbmj

Can I put an HTML button inside the canvas?

8 Answers8

Linked