'How can I force the figure to resize dynamically in canvas on js?

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>

javascript html5-canvas

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How can I force the figure to resize dynamically in canvas on js?

Sources

Related Questions