# Set canvas size and position as underlying image

**URL:** <https://discourse.threejs.org/t/set-canvas-size-and-position-as-underlying-image/44991>\
**Category:** Questions\
**Tags:** canvas, javascript\
**Created:** [November 21, 2022, 10:11pm UTC](https://discourse.threejs.org/t/set-canvas-size-and-position-as-underlying-image/44991 "2022-11-21T22:11:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![carstenmell](https://avatars.discourse-cdn.com/v4/letter/c/41988e/32.png) [@carstenmell](https://discourse.threejs.org/u/carstenmell)\
**Post date:** [November 21, 2022, 10:11pm UTC](https://discourse.threejs.org/t/set-canvas-size-and-position-as-underlying-image/44991/1 "2022-11-21T22:11:10Z")

</div>

Hi there!

I have an image and want to place a three js canvas over it with the exact same size and position as the image. The image changes its size and position when the window is resized (basic responsiveness).

How do I make the three js canvas always fit exactly over the 2D image?

---

<div class="post-metadata">

**Author:** ![LeenAlfalah](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/leenalfalah/32/18835_2.png) [@LeenAlfalah](https://discourse.threejs.org/u/LeenAlfalah)\
**Post date:** [November 22, 2022, 3:11am UTC](https://discourse.threejs.org/t/set-canvas-size-and-position-as-underlying-image/44991/2 "2022-11-22T03:11:08Z")

</div>

Hi!

You can take the offset of image in java script

You can take top, left and width of the image

And now you can have a full responsive canvas !

---

<div class="post-metadata">

**Author:** ![carstenmell](https://avatars.discourse-cdn.com/v4/letter/c/41988e/32.png) [@carstenmell](https://discourse.threejs.org/u/carstenmell)\
**Post date:** [November 23, 2022, 5:29pm UTC](https://discourse.threejs.org/t/set-canvas-size-and-position-as-underlying-image/44991/3 "2022-11-23T17:29:01Z")

</div>

Ah, that was very helpful! Thanks a lot!