Within the application I developed, using Vue and OpenLayers for creating animations, an img element with position: relative is positioned at the top right corner of a canvas element with resize: both; overflow: auto;. The issue (CodePen example) arises when this element is utilized in creating an animation loop where at each iteration, the canvas element functions as a frame that gets updated and rendered. During each step, a new canvas is composed by combining the current canvas element and another hidden img tag (with similar properties to the overlaying canvas). This hidden img tag is then accessed using .getElementById(...) and drawn onto the frame canvas using .getContext("2d").drawImage(...). Strangely enough, the img element tends to move towards the center of the canvas element under certain circumstances such as resizing the viewport or utilizing multiple screens with uncommon aspect ratios, despite all elements being fixed in size before the loop begins.
The question at hand is what could be influencing the calculated widths determining the position of the img element (as shown in the JS code) that is linked to multi-screen setups, viewports, or other factors, while performing perfectly on more standard configurations?
if (showLegendFlag === true) {
const mapLegend = document.getElementById("mapLegend");
mapCnv
.getContext("2d")
.drawImage(
mapLegend,
mapCnv.width - mapLegend.width,
0,
mapLegend.width,
mapLegend.height
); // drawImage(image, dx, dy, dWidth, dHeight)
}
<div id="map" class="map">
<img id="legendMapOverlay" src="https://geo.weather.gc.ca/geomet?version=1.3.0&service=WMS&request=GetLegendGraphic&sld_version=1.1.0&layer=GDPS.CONV_KINDEX.PT3H&format=image/png&STYLE=KINDEX&lang=en"/>
</div>
<img id="mapLegend" :src="mapLegendURL" style="display: none;" v-if="displayMapLegend" crossorigin="anonymous" />