I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I need help to ensure that the bomb image remains in the same location across all devices and screen sizes.
Below is the code snippet that I am using:
function smallBombImg(){
document.getElementById('carImg1').style.top = can.width/2 +"px";
document.getElementById('carImg1').style.left = can.height/2 +"px";
//document.getElementById('carImg1').style.background-attachment = "fixed";
document.getElementById('carImg1').style.display = "block";
document.getElementById('carImg1').src = 'img/bomb1.png';
}
Here is the relevant HTML code:
<body>
<div id="container">
<canvas id="can"></canvas>
</div>
<div id="btn">
<input type="image" id="zoomIn" src="img/up.png" onclick="zoomIn()" />
<input type="image" id="zoomOut" src="img/down.png"
onclick="zoomOut()" />
</div>
<div id="score">
<p id="scoreCount">
<b></b>
</p>
</div>
<div>
<img alt="simple1" id="carImg1" style="position: absolute; display: none;" />
</div>
</body>