title: Resize picture with a slider and canvas in Angular
body: <p>In my Angular app I want to resize a picture with a slider.</p>
  <pre><code>  img:  HTMLImageElement
    
    pixelate(selectedActor, value){    
      if (value === 1) {
        this.img = document.getElementById(selectedActor.toString()) as HTMLImageElement;
        console.log(this.img)
      }
      console.log(this.img)
      var canvas = &lt;HTMLCanvasElement&gt;document.getElementById(&quot;canvas&quot;);
      var ctx = canvas.getContext(&quot;2d&quot;);    
      canvas.width = this.img.width / value;
      canvas.height = this.img.height / value;
      ctx.drawImage(this.img, 0, 0, canvas.width, canvas.height);
      var target = new Image();
      target.src = canvas.toDataURL()
      return (target.src)    
    }
  </code></pre>
  <p>I get <code>value</code> from a slider:</p>
  <pre><code>    &lt;mat-slider
        class=&quot;my-auto&quot;
        [disabled]=&quot;disabled&quot;
        [invert]=&quot;invert&quot;
        max= 5
        min= 1
        step= 1
        thumbLabel= true
        tickInterval= 1
        value= &quot;1&quot;
        [(ngModel)]=&quot;value&quot;
        [vertical]=false
        (input)=&quot;pixelize($event)&quot;&gt;Pixelate
      &lt;/mat-slider&gt;
  </code></pre>
  <p>What I try to do is to always have the same <code>img</code> value so whenever I resize it, I do do it from the same <code>img</code> and I can resize it back and forth.
  To check if I was always using the same image I console.log it, but each time I change the <code>value</code>, my <code>img</code> is diferent. How come since I set its value only once?</p>