I have a simple html that has an input field and a canvas. How can I dynamically resize a shape based on input from the user? I apologize for simple questions, but I could not find at least something similar anywhere, although the task seems simple.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Нажми <a href="#hidden1" onclick="view('hidden1'); return false">эту ссылку</a></p>
<div id="hidden1" style="display: none;">
<div class="dl">
<p>Длина</p>
<input type="text" id="i1" oninput="fun2()" min="50" max="800">
</div>
<input type="range" id="r1" oninput="fun1()" min="50" max="800">
</div>
<div>
<canvas id="myCanvas" width="300" height="200">
Ваш браузер не поддерживает Canvas
</canvas>
</div>
</body>
<script>
var canvas = document.getElementById("myCanvas"),
context = canvas.getContext("2d");
var t1 = document.getElementById('r1');
context.beginPath();
context.moveTo(50, 50);
context.lineTo(50, t1.value);
context.lineTo(250, 250);
context.closePath();
context.fill();
var rng=document.getElementById('r1');
rng.addEventListener('input', () => { context.drawScreen(); });
</script>
<script>
function view(n) {
style = document.getElementById(n).style;
style.display = (style.display == 'block') ? 'none' : 'block';
}
function fun1(v) {
var rng=document.getElementById('r1'); //rng - это ползунок
var i1=document.getElementById('i1'); // i1 - input
i1.value=rng.value;
}
function fun2(){
var rng=document.getElementById('r1'); //rng - это ползунок
var i1=document.getElementById('i1'); // i1 - input
rng.value=i1.value;
}
</script>
</html>