Realigning the Cursor in a Container

Currently making a game for a project and added a "flashlight" effect over the top of the game.
See: https://codemyui.com/wp-content/uploads/2019/10/Flashlight-Mouse-Pointer.gif

The problem is that the torchlight does not align with the cursor, which is way over to the left of the screen. Blue circle is the cursor's rough position to highlight the issue.Here is what it looks like

I couldn't find much in the way of re-aligning the cursor on a container. I have a suspicion that it is the JS that is causing the issue but I don't know for certain. Any ideas?

Here is the relevant code:

//game flashlight  function update(e) {    var x = e.clientX || e.touches[0].clientX    var y = e.clientY || e.touches[0].clientY      let gameBox = document.getElementById('gameBox');    gameBox.style.setProperty('--cursorX', x + 'px');    gameBox.style.setProperty('--cursorY', y + 'px');  }    document.addEventListener('mousemove', update)  document.addEventListener('touchmove', update)

#gameContainer {    position: relative;    height: 1000px;    width: 1100px;    float: right;  }    #gameContent {    float: right;    margin: 20px 10px 0px 10px;    width: 1050px;    border-style: solid;    background-color: #FFE29C;    border-color: #E1AA72;    border-width: 3px;    padding: 10px;  }    #gameBox {    position: relative;    height: 768px;    width: 768px;    border-style: solid;    background-color: #EABF7D;    border-color: #E1AA72;    border-width: 3px;    padding: 10px;    margin-bottom: 10px;    float: right;    text-align: center;    margin: 0 12% 0 12%;    line-height: 1em;  }      /* Flashlight Overlay */    .image-container {    position: relative;    cursor: auto;    --cursorX: 50vw;    --cursorY: 50vh;  }    .image-container .after {    position: absolute;    top: 0;    left: 0;    width: 100%;    height: 100%;    display: block;    background: radial-gradient( circle 10vmax at var(--cursorX) var(--cursorY), rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 80%, rgba(0, 0, 0, .95) 100%);  }    #mapFit {    position: relative;    left: 10px;    height: 768px;    width: 768px;    object-fit: contain;  }

<div id="gameContainer">    <div id="gameContent">      <div id="gameBox" class="image-container">        <img id="mapFit" src="images/Temple_Escape.jpg" alt="main map">        <img id="chest" src="images/chest.png" alt="main map" onclick="chestClick()">        <img id="chestOpened" src="images/chestopened.png" alt="main map" onclick="chestClick()">        <img id="gold1" src="images/gold.png" alt="main map" onclick="gold1Click()">        <img id="gold2" src="images/gold.png" alt="main map" onclick="gold2Click()">        <img id="gold3" src="images/gold.png" alt="main map" onclick="gold3Click()">        <img id="gold4" src="images/gold.png" alt="main map" onclick="gold4Click()">        <img id="gold5" src="images/gold.png" alt="main map" onclick="gold5Click()">        <img id="gold6" src="images/gold.png" alt="main map" onclick="gold6Click()">        <img id="podium" src="images/podium.png" alt="main map" onclick="podiumClick()">        <img id="rope" src="images/rope.png" alt="main map" onclick="ropeClick()">        <img id="skeleton" src="images/skeleton.png" alt="main map" onclick="skeletonClick()">        <img id="brokenPickaxe" src="images/brokenpickaxe.png" alt="main map" onclick="pickaxeClick()">        <img id="stoneSlab1" src="images/stoneslab.png" alt="main map" onclick="slab1Click()">        <img id="stoneSlab2" src="images/stoneslab.png" alt="main map" onclick="slab2Click()">        <img id="tile1" src="images/tile1.png" alt="main map" onclick="floorStoneClick()">        <img id="door1" src="images/door1.png" alt="main map" onclick="exitDoorClick()">        <img id="redOrb" src="images/redorb.png" alt="main map" onclick="">        <img id="blueOrb" src="images/blueorb.png" alt="main map" onclick="">        <img id="greenOrb" src="images/greenorb.png" alt="main map" onclick="">        <div class="after"></div>      </div>    </div>

EDIT: Also another issue unrelated to the pointer, I cannot click on the images inside the game whilst the flashlight is overlaid on top of the map. This is probably an issue to do with the placement of div id="after". Any help with this would be greatly appreciated.

https://stackoverflow.com/questions/67238037/realigning-the-cursor-in-a-container April 24, 2021 at 07:49AM