title: Javascript event listeners and arrays
body: <p>I am trying to recreate a scratch-to-reveal-image effect with 3 images in an array triggered by 3 buttons. My event listener is not working, as you can see, it shows the same revealed images no matter the button. The event listener syntax has confused me a bit and I would like some help on that specifically.</p>
  <p>The sketch image overlay is the same throughout. Can you guide me as to where I'm going wrong?</p>
  <p>It's a lot of code, sorry about that, but I thought it best to just put all the detail in. Thank you in advance!</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const imgArr = [{
      sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
      background1: 'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500'
    },
    {
      sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
      background2: 'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500'
    },
    {
      sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
      background3: 'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=1&amp;w=500'
    },
  ]
  
  const btn = document.querySelector('#special'),
    bridge = document.querySelector("#bridge"),
    bridgeCanvas = bridge.getContext('2d'),
    brushRadius = (bridge.width / 100) * 7;
  
  // default image
  img = new Image();
  img.onload = function() {
    bridgeCanvas.drawImage(img, 0, 0, bridge.width, bridge.height);
  }
  img.src = 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png'
  
  
  btn.addEventListener('click', () =&gt; {
    img.src = imgArr[background1].sketch
    bridge.style.background1 = `url(${imgArr[background1].background1})`;
    bridge.style.backgroundSize = 'cover';
    bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
    bridgeCanvas.globalCompositeOperation = "destination-over";
  })
  
  btn.addEventListener('click', () =&gt; {
    img.src = imgArr[background2].sketch
    bridge.style.background2 = `url(${imgArr[background2].background2})`;
    bridge.style.backgroundSize = 'cover';
    bridgeCanvas.clearRect(0, 0, bridge.width, bridge.height);
    bridgeCanvas.globalCompositeOperation = "destination-over";
  })
  
  function getBrushPos(xRef, yRef) {
    const bridgeRect = bridge.getBoundingClientRect();
    return {
      x: Math.floor((xRef - bridgeRect.left) / (bridgeRect.right - bridgeRect.left) * bridge.width),
      y: Math.floor((yRef - bridgeRect.top) / (bridgeRect.bottom - bridgeRect.top) * bridge.height)
    };
  }
  
  function drawDot(mouseX, mouseY) {
    bridgeCanvas.beginPath();
    bridgeCanvas.arc(mouseX, mouseY, brushRadius, 0, 2 * Math.PI, true);
    bridgeCanvas.globalCompositeOperation = "destination-out";
    bridgeCanvas.fill();
  }
  
  
  bridge.addEventListener("mousemove", (e) =&gt; {
    let brushPos = getBrushPos(e.clientX, e.clientY);
    if (e.which === 1) {
      drawDot(brushPos.x, brushPos.y);
    }
  }, false);
  
  bridge.addEventListener("touchmove", function(e) {
    let touch = e.targetTouches[0];
    if (touch) {
      let brushPos = getBrushPos(touch.pageX, touch.pageY);
      drawDot(brushPos.x, brushPos.y);
    }
  }, false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  
  #bridge {
    margin: 0 auto;
    background-image: url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png');
    background-image: -webkit-image-set(url('https://trellidor.co.za/wp-content/uploads/2020/12/Colour.png') 2x);
    background-size: cover;
    width: 100%;
    max-width: 750px;
    height: auto;
    cursor: crosshair;
    cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/circular-cursor.png') 53 53, crosshair;
  }
  
  #bridgeContainer {
    text-align: center;
    font-family: Avenir, sans-serif;
  }
  
  #bridgeContainer figcaption {
    margin-top: 2rem;
  }
  
  #special {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
  }
  
  #special2 {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
  }
  
  #special3 {
    background-color: blue;
    color: white;
    border: none;
    outline: none;
    border-radius: 1.5rem;
    font-size: larger;
    padding: .5rem 1rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;figure id="bridgeContainer"&gt;
    &lt;canvas id="bridge" width="750" height="465"&gt;&lt;/canvas&gt;
  &lt;/figure&gt;
  &lt;button id="special"&gt;Color1&lt;/button&gt;
  &lt;button id="special2"&gt;Color2&lt;/button&gt;
  &lt;button id="special3"&gt;Color3&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>