diff --git a/programming/javascript/api-reference/index.md b/programming/javascript/api-reference/index.md
index 15fd91a6..1359a00a 100644
--- a/programming/javascript/api-reference/index.md
+++ b/programming/javascript/api-reference/index.md
@@ -104,13 +104,15 @@ breadcrumbText: API Reference
 
 ### UI
 
-| Name                                                             | Description                                                                                        |
-| ---------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| [convertToPageCoordinates](./ui.md#convertToPageCoordinates)     | Converts coordinates from the video's coordinate system to coordinates relative to the whole page. |
-| [convertToClientCoordinates](./ui.md#convertToClientCoordinates) | Converts coordinates from the video's coordinate system to coordinates relative to the viewport.   |
-| [setCameraView](./ui.md#setCameraView)                           | Sets the `CameraView` instance to be used with the `CameraEnhancer`.                               |
-| [getCameraView](./ui.md#getCameraView)                           | Retrieves the current `CameraView` instance associated with the `CameraEnhancer`.                  |
-| [getVideoEl](./ui.md#getVideoEl)                                 | Retrieves the HTMLVideoElement used by the `CameraEnhancer` for displaying the camera feed.        |
+| Name                                                                         | Description                                                                                         |
+| ---------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
+| [convertToPageCoordinates](./ui.md#convertToPageCoordinates)                 | Converts coordinates from the video's coordinate system to coordinates relative to the whole page.  |
+| [convertToClientCoordinates](./ui.md#convertToClientCoordinates)             | Converts coordinates from the video's coordinate system to coordinates relative to the viewport.    |
+| [convertToScanRegionCoordinates](./ui.md#convertToScanRegionCoordinates)     | Converts coordinates from the video's coordinate system to coordinates relative to the scan region. |
+| [convertToContainCoordinates](./ui.md#convertToClientCoordinates)            | Converts coordinates from the `fit: cover` to `fit: contain` mode.                                  |
+| [setCameraView](./ui.md#setCameraView)                                       | Sets the `CameraView` instance to be used with the `CameraEnhancer`.                                |
+| [getCameraView](./ui.md#getCameraView)                                       | Retrieves the current `CameraView` instance associated with the `CameraEnhancer`.                   |
+| [getVideoEl](./ui.md#getVideoEl)                                             | Retrieves the HTMLVideoElement used by the `CameraEnhancer` for displaying the camera feed.         |
 
 ### Auxiliary
 
diff --git a/programming/javascript/api-reference/ui.md b/programming/javascript/api-reference/ui.md
index 382f080c..30432506 100644
--- a/programming/javascript/api-reference/ui.md
+++ b/programming/javascript/api-reference/ui.md
@@ -17,6 +17,7 @@ permalink: /programming/javascript/api-reference/ui.html
 | [convertToScanRegionCoordinates](#convertToScanRegionCoordinates)     | Converts coordinates from the video's coordinate system to coordinates relative to the scan region. |
 | [convertToPageCoordinates](#convertToPageCoordinates)                 | Converts coordinates from the video's coordinate system to coordinates relative to the whole page.  |
 | [convertToClientCoordinates](#convertToClientCoordinates)             | Converts coordinates from the video's coordinate system to coordinates relative to the viewport.    |
+| [convertToContainCoordinates](#convertToClientCoordinates)            | Converts coordinates from the `fit: cover` to `fit: contain` mode.                                  |
 | [setCameraView](#setCameraView)                                       | Sets the `CameraView` instance to be used with the `CameraEnhancer`.                                |
 | [getCameraView](#getCameraView)                                       | Retrieves the current `CameraView` instance associated with the `CameraEnhancer`.                   |
 | [getVideoEl](#getVideoEl)                                             | Retrieves the HTMLVideoElement used by the `CameraEnhancer` for displaying the camera feed.         |
@@ -101,6 +102,33 @@ cameraEnhancer.convertToClientCoordinates({x: 0, y: 0});
 
 [Point](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/point.html)
 
+## convertToContainCoordinates
+
+Converts coordinates from the `fit: cover` to `fit: contain` mode.
+This is useful for positioning HTML elements in relation to the video element on the screen, regardless of page scrolling.
+
+```typescript
+convertToContainCoordinates(point: Point): Point;
+```
+
+**Parameters**
+
+`point`: a `Point` object representing the x and y coordinates within the video's coordinate system.
+
+**Return value**
+
+A `Point` object representing the converted x and y coordinates relative to the viewport.
+
+**Code Snippet**
+
+```javascript
+cameraEnhancer.convertToContainCoordinates({x: 0, y: 0});
+```
+
+**See also**
+
+[Point](https://www.dynamsoft.com/capture-vision/docs/web/programming/javascript/api-reference/core/basic-structures/point.html)
+
 ## setCameraView
 
 Sets the `CameraView` instance to be used with the `CameraEnhancer`.