# Zoom an image in cinder

**URL:** <https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409>\
**Category:** Uncategorized\
**Created:** [November 23, 2016, 9:36am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409 "2016-11-23T09:36:14Z")\
**Posts on this page:** 1\
**Showing post:** 2

<div class="post-metadata">

**Author:** ![paul.houx](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.libcinder.org/paul.houx/32/31_2.png) [@paul.houx](https://discourse.libcinder.org/u/paul.houx)\
**Post date:** [November 23, 2016, 10:45am UTC](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409/2 "2016-11-23T10:45:10Z")

</div>

Hi,

by default in Cinder, the origin (0,0) of an image is in the upper-left corner. This is the point around which the image is rotated or from which it is scaled. If you want to scale from the center, you’ll first have to translate the image so that (0,0) is in the center:

```auto
gl::translate( -0.5f * imageWidth, -0.5f * imageHeight );

```

Then you scale or rotate the image:

```auto
gl::scale( 2.0f, 2.0f );

```

And finally you translate the origin of the image (which is now its center) to the center of the window:

```auto
gl::translate( 0.5f * getWindowWidth(), 0.5f * getWindowHeight() );

```

It’s important to remember that, because of the way the [transformation matrices](https://www.processing.org/tutorials/transform2d/) are defined in OpenGL, you have to reverse the order of operations. Finally, make sure to push and pop the model matrix. The code therefor becomes:

```auto
gl::pushModelMatrix();
gl::translate( 0.5f * getWindowWidth(), 0.5f * getWindowHeight() );
gl::scale( 2.0f, 2.0f );
gl::translate( -0.5f * imageWidth, -0.5f * imageHeight );
gl::draw( texture );
gl::popModelMatrix();

```

-Paul

---

_[View the full topic](https://discourse.libcinder.org/t/zoom-an-image-in-cinder/409)._