Помещение холста и ввода в div с div, имеющим "position: относительный;"и дети, имеющие "положение: абсолютное";это решение.Если вам не нужны полосы прокрутки, либо убедитесь, что содержимое внутри div меньше, чем div ИЛИ установите «overflow: hidden».
Еще одна вещь, установите тип отображения холста на «block».Без этого холст имеет тип «span», который добавляет пробел и вызывает появление полосы прокрутки, если холст установлен на 100%
const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();
body {
margin: 0;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#form {
position: absolute;
left: 1em;
top: 1em;
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.7);
}
#form input {
font-size: 20pt;
display: block;
border: none;
color: white;
background-color: #444;
margin: 0.5em;
}
<div id="container">
<canvas id="c1"></canvas>
<div id="form">
<input type="text" id="user" placeholder="username">
<input type="password" id="pass" placeholder="password">
</div>
</div>
у вас был холст 150х30?Это довольно мало, но мы можем настроить размеры
const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();
#container {
position: relative;
width: 150px;
height: 30px;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#form {
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0);
}
#form input {
font-size: 8px;
display: block;
background-color: rgba(0,0,0,0);
border: 1px solid gray;
}
<div id="container">
<canvas id="c1"></canvas>
<div id="form">
<input type="text" id="user" placeholder="username">
<input type="password" id="pass" placeholder="password">
</div>
</div>