html - image update without clicking it JavaScript

Question

this is the code and it works only by clicking canvas/img. How to only make it update without clicking or using onblur? maybe something like an xmlhttprequest but i tried that and it would not work. It gave errors and also im a noob and dont know how to fix errors that kept appearing

window.onload = function () {

          var context = document.getElementById('img').getContext('2d');

          var base_image = document.querySelector('.fj');
          var canvas = document.querySelector('.canvas');
          var h2 = document.getElementById('demo');
          var brightVal = document.getElementById('b');
          context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height);
      
          document.getElementById('bri').onblur = function () {
            var amount = this.value + '%';
            brightVal.innerHTML = amount;
    
            var img = document.getElementById('img');
    
            img.setAttribute('style', 'filter:brightness(' + amount +  ');');

          }
        }

<canvas id="img" class="canvas">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj">
</canvas>
<input type="range" min="-300" max="500" value="100" class="slider" id="bri">
<h2 id="demo">Value: <span id="b">0</span></h2>

question from:https://stackoverflow.com/questions/66066891/image-update-without-clicking-it-javascript

Answer 1

You can also use oninput, so it updates dynamically

window.onload = function () {

          var context = document.getElementById('img').getContext('2d');

          var base_image = document.querySelector('.fj');
          var canvas = document.querySelector('.canvas');
          var h2 = document.getElementById('demo');
          var brightVal = document.getElementById('b');
          context.drawImage(base_image, 0, 0, base_image.width, base_image.height, 0, 0, canvas.width, canvas.height);
      
          document.getElementById('bri').oninput = function () {
            var amount = this.value + '%';
            brightVal.innerHTML = amount;
    
            var img = document.getElementById('img');
    
            img.setAttribute('style', 'filter:brightness(' + amount +  ');');

          }
        }

<canvas id="img" class="canvas">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Cheadle_Hulme_Arches.jpg/324px-Cheadle_Hulme_Arches.jpg" class="fj">
</canvas>
<input type="range" min="-300" max="500" value="100" class="slider" id="bri">
<h2 id="demo">Value: <span id="b">0</span></h2>