# using canvis drawImage() when you don't know image dimensions

**URL:** <https://forum.kirupa.com/t/using-canvis-drawimage-when-you-dont-know-image-dimensions/638080>\
**Category:** web dev\
**Created:** [April 15, 2018, 1:09pm UTC](https://forum.kirupa.com/t/using-canvis-drawimage-when-you-dont-know-image-dimensions/638080 "2018-04-15T13:09:14Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ollie-w](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/ollie-w/32/8435_2.png) [@ollie-w](https://forum.kirupa.com/u/ollie-w)\
**Post date:** [April 15, 2018, 1:09pm UTC](https://forum.kirupa.com/t/using-canvis-drawimage-when-you-dont-know-image-dimensions/638080/1 "2018-04-15T13:09:14Z")

</div>

I am getting images from an API. They are all different sizes and I don’t know ahead of time what dimension they will be.  
Both CSS `background-imag`e and `object-fit` offer `cover` and `contain`. What I would like is to recreate the `cover` behaviour in canvas. I want the edges to be cut off from the center so that the image fits into the specified size (but I don’t want to deform/stretch the image).  
I couldn’t work out how to do this using `drawImage()`. Is there a way?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [April 15, 2018, 4:09pm UTC](https://forum.kirupa.com/t/using-canvis-drawimage-when-you-dont-know-image-dimensions/638080/2 "2018-04-15T16:09:30Z")

</div>

Load the image outside of the canvas beforehand, then you can get it’s dimensions (Image.naturalHeight and Image.naturalWidth) and draw it correctly.