I have problem with canvas. I want canvas full height its working. But when i drawing a circle and i put some space in div then the circle is scaling very bad. scaled circle. I want circle stay where it was drew when i put some space in div. Here is my code. Please help me to find the solution. Thanks. If u test it first add some space in div and there you can draw.
https://jsfiddle.net/gu3w97zf/
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let coord = { x: 0, y: 0 };
document.addEventListener('mousedown', start);
document.addEventListener('mouseup', stop);
window.addEventListener('resize', resize);
function resize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
resize();
function start(event) {
document.addEventListener('mousemove', draw);
reposition(event);
}
function reposition(event) {
coord.x = event.clientX - canvas.offsetLeft;
coord.y = event.clientY - canvas.offsetTop;
}
function stop() {
document.removeEventListener('mousemove', draw);
}
function draw(event) {
ctx.beginPath();
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.strokeStyle = '#ACD3ED';
ctx.moveTo(coord.x, coord.y);
reposition(event);
ctx.lineTo(coord.x, coord.y);
ctx.stroke();
}.all {
background: gray;
position: relative;
min-height: 100%;
letter-spacing: 50px;
}
.text {
position: inherit;
min-height: 100%;
z-index: 99;
width: -webkit-fill-available;
}
#canvas {
width: -webkit-fill-available;
position: absolute;
height: -webkit-fill-available;
top: 0;
z-index: 10;
}<div class="all">
<canvas id="canvas">
</canvas>
<div contenteditable="true" class="text">
</div>
</div>