Why does my HTML div not appear on my HTML canvas?

Question

I want to be able to append a replay button on to my canvas when the player loses my javascript game.

I have HTML:

<canvas id="myCanvas" >

</canvas>

And part of my javascript:

var canvas = document.getElementById("myCanvas");

...

if (gameover){
    var div = document.createElement('div');
    div.innerHTML = '<button onclick="window.reload">replay</button>';
    canvas.appendChild(div);
}

When I inspect my window the HTML has been added, but it doesn't show up on the screen?

Canvas is a void element. You can give backup text inside of that but not an element. — Rajaprabhu Aravindasamy, Apr 18 '16 at 12:05
@RajaprabhuAravindasamy so how would I allow a player to reload the window? — S Craig, Apr 18 '16 at 12:07
You have to place the button outside the canvas. And you need to position it to display over the canvas. — Rajaprabhu Aravindasamy, Apr 18 '16 at 12:09
@RajaprabhuAravindasamy you can also give backup elements, but they won't be parsed if the canvas element is supported. — Kaiido, Apr 18 '16 at 12:14

score 2 · Answer 1 · edited May 23 '17 at 12:24

2

The canvas element cannot render HTML, You have to add a new sibling to the canvas, so your HTML code renders after the canvas.

Maybe this would help you: How to do insert After() in JavaScript without using a library?

edited May 23 '17 at 12:24

Community

1
1

answered Apr 18 '16 at 12:08

Bardo

2,470
2
24
42

Why does my HTML div not appear on my HTML canvas?

1 Answers1