Dynamically moving pause button rectangle correct but drawing incorrectly

I have a button class which is basic, it glows when mouse is over the button and works for my main menu. However with a pause function that I have the x values are going to be different all the time. I have a camera class which changes the viewport and will scroll depending on where the player's position is. This is all working fine. However when I introduced the pause option either the Drawn "button" is placed correctly, however the rectangle used for mouse detection is some distance away from that.

replay.SetPosition(new Vector2(camera.viewport.Width / 4 + 50,camera.centre.Y));
//replay.SetPosition(new Vector2((int)camera.centre.X , (int)camera.centre.Y);
replay.Update(mouse);

The commented out one draws the image correctly but the rectangle is way off. The uncommented version has the correct rectangle placement but the image stays at currently 200(x),250(y)

if (isPaused)
{
    spriteBatch.Draw(pauseTexture,pauseRectangle, Color.White);
    //replay.Draw(spriteBatch);
    exit.Draw(spriteBatch);
    mainmenu.Draw(spriteBatch);
}

The camera class update elements:

public void Update(Vector2 position, int xOffset, int yOffset)
{
    if (position.X < viewport.Width / 4)
        centre.X = viewport.Width / 4;
    else if (position.X > xOffset - (viewport.Width / 4))
        centre.X = xOffset - (viewport.Width / 4);
    else centre.X = position.X;
}

I will be around most of the day to add information if needed. Thanks for all the help!

Solution

Unfortunately I don't have enough rep to comment just yet, so based on the information given I will do my best to answer.

It sounds like your rectangle and position of your menu item are not being updated together. Let's say you have a position of (0,0) and rectangle of (0, 0, 100, 100) - (x, y, width, height), so the rectangle extends from (0, 0) to (100, 100). If you update the position to (100, 100), for example, you also have to update the rectangle's x and y coords to (100, 100), thus the rectangle now extends from (100, 100) to (200, 200).

I don't have enough information from your code samples to tell you what's going wrong where, but from what I can tell that's what is happening.

On another note.. if you are passing in the camera's transformation matrix to SpriteBatch.Begin(...) and you are also making draw calls to your HUD elements within that SpriteBatch.Begin...End section, you should consider making another SpriteBatch.Begin...End section without the camera's transformation matrix being passed in. This way your HUD elements' positions will be in screen coordinates compared to world coordinates, and you won't run into issues like this. The HUD elements typically never change positions, unless of course you allow them to, but you will still be working in screen coordinates compared to world coordinates.

Example: (Keep in mind that I don't recall what the parameters are exactly for SpriteBatch.Begin(...) but this should help)

//Main Draw function
public void Draw() {
    //World Coordinates
    spriteBatch.Begin(cameraTransformationMatrix);
    //Draw all world coordinate objects
    //Player, Enemies, Walls, etc.
    spriteBatch.End();

    //Screen Coordinates
    spriteBatch.Begin();
    //Draw all screen coordinate objects
    //Menus, In-Game HUD elements, etc.
    spriteBatch.End();
}