I'm making a small sidescroller website. I want to use a png as 3 clickable elements on the map that each trigger a modal, but before that I'm trying to get them to scroll along with the background object and I guess I don't understand how to calculate their boundaries and what to pass into the function.

My rough idea for the right arrow boundary logic

And my shot in the dark (trying to follow the method I used to scroll the background):

class ClickSign {
    constructor(Background, gameWidth, position, modalId) {
        this.image = document.getElementById('clickImage');
        this.bgWidth = Background.width;

        // Canvas width
        this.gameWidth = gameWidth;

        this.position = position;
        this.modal = document.getElementById(modalId);
        this.xi = this.position.x;
        this.width = 43;
        this.height = 39;
        this.speed = 5;
    }

    // Draw sprite on canvas
    draw(context) {
        context.drawImage(this.image, this.position.x, this.position.y, this.width, this.height);
    }

    update(input) {

        clickSign1.draw(ctx);

        // === MOVEMENT ===
        
        // If left key && x is less than ???
        if (input.keys.indexOf('ArrowLeft') != -1 && this.position.x < this.bgWidth - (this.gameWidth - this.xi)) {

            this.position.x += this.speed;
        }

        if (input.keys.indexOf('ArrowRight') != -1 && this.position.x > this.xi - this.gameWidth) {

            this.position.x -= this.speed;
        }

    }

const clickSign1 = new ClickSign(background, canvas.width, {x: 958, y: 364}, "WelcomeModal");