Viewport affecting relative position of a nested element in resizable div-CodePudding

CodePudding user response：

OpenLayers may have a transform set on the canvas depending on the device pixel ratio. You could try two options:

Option 1 Specify pixelRatio: 1, in the ol.Map options to override the device pixel ratio so no transform is needed.

Option 2 Reset the transform before you draw the image, but surround the calls with save() and restore()

  const mapCtx = mapCnv.getContext("2d")
  mapCtx.save();
  mapCtx.resetTransform()
  mapCtx
    .drawImage(
      mapLegend,
      mapCnv.width - mapLegend.width,
      0,
      mapLegend.width,
      mapLegend.height
    );
  mapCtx.restore();

Note that OpenLayers version 6 and 7 do not have a single map canvas and your approach might not work.