Javascript event listeners and arrays

Question

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.

The sketch image overlay is the same throughout. Can you guide me as to where I'm going wrong?

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!

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&cs=tinysrgb&dpr=1&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&cs=tinysrgb&dpr=1&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&cs=tinysrgb&dpr=1&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', () => {
  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', () => {
  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) => {
  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);

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;
}

<figure id="bridgeContainer">
  <canvas id="bridge" width="750" height="465"></canvas>
</figure>
<button id="special">Color1</button>
<button id="special2">Color2</button>
<button id="special3">Color3</button>

Answer 1

Look at the change I have made in the EventListener.

The changes I made are: Added class on the buttons so that they can be selected together. When placing the listener for the loop also puts "date" information on the buttons. This information is a serial number that corresponds to the Array record

const imgArr = [{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/1666012/pexels-photo-1666012.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/572897/pexels-photo-572897.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
{
    sketch: 'https://trellidor.co.za/wp-content/uploads/2020/12/Sketch.png',
    background: 'https://images.pexels.com/photos/2365457/pexels-photo-2365457.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'
},
]

const btn = document.querySelectorAll('.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'


for (var i = 0; i < imgArr.length; i++) {
    btn[i].setAttribute('data', i);
    btn[i].addEventListener("click", function () {
        myFunc(this);
    });
}

function myFunc(x) {
    var arr = x.getAttribute('data');
    img.src = imgArr[arr].sketch
    bridge.style.background = `url(${imgArr[arr].background})`;
    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) => {
    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);

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;
}

<figure id="bridgeContainer">
    <canvas id="bridge" width="750" height="465"></canvas>
</figure>
<button id="special" class="special">Color1</button>
<button id="special2" class="special">Color2</button>
<button id="special3" class="special">Color3</button>