Drawing A4 overlay map

Question

I want to show an overlay with A5, A4, A3, A2, A1 or A0 size, but I dont know how do it. For example, I want to show an overlay with A4 dimensions over the map but I dont know what I'm doing wrong.

And I want that overlay keep the coordinates and when I'll do zoom-in or zoom-out scale the overlay.

i.e. if the zoom is lower the overlay should be smaller and when the zoom is higher the overlay should be greater, but keeping the dimensions of the A4.

Here is my code.

drawPaper = () => {
    this.removePaper();

    var center = this.map.getView().getCenter();
    var resolution = 300;

    var dims = {
        a0: [1189, 841],
        a1: [841, 594],
        a2: [594, 420],
        a3: [420, 297],
        a4: [297, 210],
        a5: [210, 148]
    };

    // Get selected paper
    var dim = dims[this.state.pos];
    // Get width and height
    var width;
    var height;
    if (this.orientation.localeCompare('Portrait') === 0) {
        width = Math.round(dim[1] * resolution / 25.4);
        height = Math.round(dim[0] * resolution / 25.4);
    } else {           
        width = Math.round(dim[0] * resolution / 25.4);
        height = Math.round(dim[1] * resolution / 25.4);
    }

    // 1 - Get center pixel
    var pixelCenter = this.map.getPixelFromCoordinate(center);

    // 2 - Get new coordinates
    // 2.1 - Get point up-right
    var pixelCenterXur = pixelCenter[0] + width/2;
    var pixelCenterYur = pixelCenter[1] + height/2;
    var upRight = this.map.getCoordinateFromPixel([pixelCenterXur, pixelCenterYur]);
    // 2.2 - Get point up-left
    var pixelCenterXul = pixelCenter[0] - width/2;
    var pixelCenterYul = pixelCenter[1] + height/2;
    var upLeft = this.map.getCoordinateFromPixel([pixelCenterXul, pixelCenterYul]);
    // 2.3 - Get point lower-right
    var pixelCenterXdr = pixelCenter[0] + width/2;
    var pixelCenterYdr = pixelCenter[1] - height/2;
    var downRight = this.map.getCoordinateFromPixel([pixelCenterXdr, pixelCenterYdr]);
    // 2.4 - Get point lower-left
    var pixelCenterXdl = pixelCenter[0] - width/2;
    var pixelCenterYdl = pixelCenter[1] - height/2;
    var downLeft = this.map.getCoordinateFromPixel([pixelCenterXdl, pixelCenterYdl]);

    var points = [
        upLeft, // sup-izq
        upRight, // sup-der
        downRight, // inf-der
        downLeft  // inf-izq
    ];

    var feature = new Feature({
        geometry: new Polygon([points])
    });

    this.translate = new Translate({
        features: new Collection([feature])
    });

    this.translate.on('translateend', evt => {
        evt.features.forEach(feat => {
          // process every feature
          this.setState({ extent: feat.getGeometry().getExtent(), flatCoordinates: feat.getGeometry().flatCoordinates });
        });
    })

    var vector = new Vector({
        name: 'paper',
        visible: true,
        source: new VectorSource({
            features: [feature]
        })
    });
    this.map.addInteraction(this.translate);
    this.map.addLayer(vector);
}

EDIT:

updateMapResolution() {
    // Map resolution = 156543.04 meters/pixel * cos(latitude) / (2 ^ zoomlevel)
    this.zoomlevel = this.map.getView().getZoom();
    this.map_resolution = 156543.04 * Math.cos(this.calculateLatitudeRadians()) / Math.pow(2, this.zoomlevel);
    this.map_resolution = Math.round(this.map_resolution * 100) / 100;
}

calculateScale() {
    // Map scale = 1 : (ScreenRes pixels/inch * 39.37 inches/meter * 156543.04 meters/pixel * cos(latitude) / (2 ^ zoomlevel))
    var dpx2 = Math.pow(window.screen.width, 2) + Math.pow(window.screen.height, 2);     
    var dpx = Math.sqrt(dpx2);
    var ppi = dpx / window.screen.pixelDepth;

    this.zoomlevel = this.map.getView().getZoom();
    this.scale = ppi * 39.37 * 156543.04 * Math.cos(this.calculateLatitudeRadians()) / Math.pow(2, this.zoomlevel);
    this.scale = Math.round(this.scale);
    this.showOption();
}