instead of storing the absolute values, you should store relative values. That means, that instead of storing the pixel-value, you store the percentage of how right a dot is (instead of 1257 , you store 0.97253 ). On resizing, you can calculate the absolute values from the relative ones. You can use and expand the example functions below.
/// returns current viewport dimensions as [x,y]
const getViewportDim = function getViewportDim() {
return [
Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
Math.max(document.documentElement.clientHeight, window.innerHeight || 0),
];
};
/// returns relative [x,y] coords, depending on the viewport dimensions
const getRelCoords = function getRelCoords(absX, absY) {
const viewportDim = getViewportDim();
return [
absX / viewportDim[0],
absY / viewportDim[1],
];
};
/// returns absolute [x,y] coords, depending on the viewport dimensions
const getAbsCoords = function getAbsCoords(relX, relY) {
const viewportDim = getViewportDim();
return [
relX * viewportDim[0],
relY * viewportDim[1],
];
};