Tengo un html simple que tiene un campo de entrada y un lienzo. ¿Cómo puedo cambiar dinámicamente el tamaño de una forma según la entrada del usuario? Pido disculpas por las preguntas simples, pero no pude encontrar al menos algo similar en ningún lado, aunque la tarea parece 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>