# Interface: ScanRegion

[Mobile Document Scanner API Reference](../index.md) / ScanRegion

# Interface: ScanRegion

Defined in: [src/views/DocumentScannerView.ts:62](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/views/DocumentScannerView.ts#L62)

Set the scan region within the [DocumentScannerView](../classes/DocumentScannerView.md) viewfinder for document scanning from the [DocumentScannerViewConfig](DocumentScannerViewConfig.md).

## Remarks

MDS determines the scan region with the following steps:
1. Use [ScanRegion.ratio](#ratio) to set the height-to-width ratio of the rectangular scanning region, then scale the rectangle up to fit within the viewfinder.
2. Translate the rectangle upward by the number of pixels specified by [ScanRegion.regionBottomMargin](#regionbottommargin).
3. Create a visual border for the scanning region boundary on the viewfinder with a given stroke width in pixels and stroke color.

## Example

Create a scan region with a height-to-width ratio of 3:2, translated upwards by 20 pixels, with a green, 3 pixel-wide border in the viewfinder:

```javascript
scanRegion {
  ratio: {
    width: 2,
    height: 3,
  },
  regionBottomMargin: 20,
  style: {
    strokeWidth: 3,
    strokeColor: "green",
  },
}
```

## Properties

### ratio

> **ratio**: `object`

Defined in: [src/views/DocumentScannerView.ts:68](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/views/DocumentScannerView.ts#L68)

The aspect ratio of the rectangular scan region.

#### height

> **height**: `number`

The height of the rectangular scan region.

#### width

> **width**: `number`

The width of the rectangular scan region.

***

### regionBottomMargin

> **regionBottomMargin**: `number`

Defined in: [src/views/DocumentScannerView.ts:85](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/views/DocumentScannerView.ts#L85)

Bottom margin below the scan region measured in pixels.

***

### style

> **style**: `object`

Defined in: [src/views/DocumentScannerView.ts:91](https://github.com/Dynamsoft/document-scanner-javascript/blob/main/src/views/DocumentScannerView.ts#L91)

The styling for the scan region outline in the viewfinder.

#### strokeColor

> **strokeColor**: `string`

The color of the outline of the scan region.

#### strokeWidth

> **strokeWidth**: `number`

The pixel width of the outline of the scan region.