Button on top of canvas
css, html, javascript
Solution
You can achieve this by using an additional container for both `canvas` and `button`. Here is how it would work
.canvas-container{
position: relative;
width: 500px;
height: 500px;
}
#canvas {
position: absolute;
background-color:lightgrey
}
#button {
position:absolute;
left:30%;
top:40%
}
<div class="canvas-container">
<canvas id='canvas' width='500px' height='500px'></canvas>
<button id='button'>Whats up</button>
</div>
You have to set `canvas-container`'s `width` and `height` to same as canvas `height` and `width` otherwise button position will change.
Problem
So I have a canvas and I want to place an html Element over that canvas using css. I want the button to stay in place in the canvas when you resize the whole entire page and currently I have this code. https://jsfiddle.net/z4fhrhLc/ ``` #button {position:absolute; top:40%; left:30%;} ```