I'm attempting to create a canvas line diagonally above two textboxes that are also positioned diagonally (similar to Samsung's pattern passcode) when a button is clicked, but I am facing difficulties in achieving this.
I have attempted to solve this by adjusting the input positions to absolute (resulting in some overlaps with other elements), however, as of now, I haven't found an optimal solution.
<!DOCTYPE html>
<html>
<head>
<style>
* {
z-index: 0;
}
canvas {
z-index: 1;
position: absolute;
}
</style>
</head>
<body>
<div id="grid">
<script>
for(let i = 0; i < 2; i++){
for(let j = 0; j < 2; j++){
document.getElementById("grid").innerHTML += `<input type="text" id="cell-${i}-${j}" max length="1" value="${2*i+j}" pattern="[A-Za-z]"/>`;
}
document.getElementById("grid").innerHTML += "<br/>";
}
</script>
<button onclick="draw()" id="draw_btn">Draw Line</button>
</div>
<script>
function draw(){
const canvas = document.createElement("canvas");
canvas.width = 200;
canvas.height = 200;
const ctx = canvas.getContext("2d");
ctx.strokeStyle = "#ff0000";
ctx.lineWidth = 10;
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
document.body.appendChild(canvas);
}
</script>
</body>
</html>