# Viewports

> Each [Enabled Element](enabled-elements.md) has a **Viewport** which describes how the [Image](image.md) should be rendered.

The viewport parameters for an enabled element can be obtained via the [getViewport()](../api.md#getviewport) function and set using the [setViewport()](../api.md#setviewport) function. The available properties for the Viewport can be found in the [Viewport object definition](../api.md#viewport) in the API documentation.

# Viewports

> Each [Enabled Element](enabled-elements.md) has a **Viewport** which describes how the [Image](image.md) should be rendered.

The viewport parameters for an enabled element can be obtained via the [getViewport()](../api.md#getviewport) function and set using the [setViewport()](../api.md#setviewport) function. The available properties for the Viewport can be found in the [Viewport object definition](../api.md#viewport) in the API documentation.


<p data-height="500"
   data-theme-id="dark"
   data-slug-hash="wmvbLO"
   data-default-tab="result"
   data-user="swederik"
   data-embed-version="2"
   data-pen-title="CornerstoneJS - Viewport Example"
   data-preview="true"
   class="codepen">
   See the Pen <a href="https://codepen.io/swederik/pen/wmvbLO/">CornerstoneJS - Viewport Example</a> by Erik Ziegler (<a href="https://codepen.io/swederik">@swederik</a>) on <a href="https://codepen.io">CodePen</a>.
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Add embedded Viewport demo CodePen to docs
Add embedded Viewport demo CodePen to docs
