In html page, mainly three elements are present those are canvas,video, div.

Below is the css for same.

#myCanvas
{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0px;
    object-fit: cover;
}

#myVideo
{
    padding: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    display:none;
}

#divRectArea
{
    position: fixed;
    border: solid 5px blue;
    top:79%;
    left:72%;
    width: 24%;
    height: 15%;
}

In javascript, we are drawing video on canvas.

The width and height of canvas & video set to 1080, 1920 respectively via javascript .

Due to object-fit: cover, canvas is getting stretched to entire screen (viewport) [without maintaining aspect ratio].

Note that div (divRectArea) has position as fixed in css.

I want to draw reactangle exactly at same location where div is placed,

How to achieve this ?

Thank you in advance.