# HitArea offset after window resized
**URL:** https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137
**Category:** Phaser 3
**Created:** [November 4, 2019, 5:41am UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137 "2019-11-04T05:41:35Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Grepy](https://phaser.discourse.group/u/Grepy)
#### Post date: [November 4, 2019, 5:41am UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/1 "2019-11-04T05:41:36Z")
Hi,
I’m working on a game with one interactive element, for which I created hitArea in scene’s start() function:
```
var hit_area = new Phaser.Geom.Rectangle(-17, -15, 34, 51);
this.myobject.setInteractive(hit_area, Phaser.Geom.Rectangle.Contains);
```
This works well until window is resized. My canvas has fixed size and is horizontally centered using CSS inside the window. But it seems like after resize, whole canvas with it’s content has moved but object’s hit Area stays in place and therefore is not aligned with object anymore.
When I resize window to original position, it is well aligned again.
When I start game with smaller window size, hit Area is aligned but after resize (stretch window width) it is offset from object to other side - e.g. still stays in same offset relative to window left border - but not accordind to canvas coordinates.
I tried to removeInteractive() and then setInteractive() with same arguments after each window resize but it is not working. Is there an option to reset hitArea after window is resized?
---
### Author:  [@Thundros](https://phaser.discourse.group/u/Thundros)
#### Post date: [November 4, 2019, 6:10pm UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/2 "2019-11-04T18:10:33Z")
I’m with @Grepy! How do you fix this?
---
### Author:  [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [November 4, 2019, 7:49pm UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/3 "2019-11-04T19:49:45Z")
> [@Grepy](#):
>
> I tried to removeInteractive() and then setInteractive() with same arguments after each window resize but it is not working. Is there an option to reset hitArea after window is resized?
Sounds like a Scale Manager problem. See [Parent and Display canvas containment guidelines](https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html#toc2).
---
### Author:  [@Grepy](https://phaser.discourse.group/u/Grepy)
#### Post date: [November 28, 2019, 5:24am UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/4 "2019-11-28T05:24:05Z")
Thank you - I didn’t find the solution there but it pointed me in the right direction:
Rather than centering the canvas parent div via CSS - **I stretched parent div across screen and centered canvas in phaser config** using `autoCenter: Phaser.Scale.CENTER_BOTH`
This way the **problem is solved** allthough I’m not sure why setting position of the parent div causes this error.
---
### Author:  [@liorGameDev](https://phaser.discourse.group/u/liorGameDev)
#### Post date: [April 30, 2020, 9:44pm UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/5 "2020-04-30T21:44:51Z")
I had the same problem and i solved it like this:
1. I didn’t add anything to the game config (no scale, parent, autocenter)
2. I wrapped the canvas with a div that onResize i set it to the window size.
3. The canvas css:
`canvas { padding: 0; margin: auto; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -moz-user-select: none; -webkit-user-select: none; max-width: 100% !important; max-height: 100% !important; }`
---
### Author:  [@mic](https://phaser.discourse.group/u/mic)
#### Post date: [September 21, 2020, 1:33am UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/6 "2020-09-21T01:33:25Z")
I was able to solve this problem with this code. I’m using a parent container, with no scale and no autocenter.
```
window.addEventListener('resize', () => {
scene.scale.setParentSize(Constants.APP_WIDTH, Constants.APP_HEIGHT);
}, false);
```
---
### Author:  [@samme](https://phaser.discourse.group/u/samme)
#### Post date: [September 21, 2020, 7:49pm UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/7 "2020-09-21T19:49:51Z")
Phaser v3.50.0 will have [a fix for this](https://github.com/photonstorm/phaser/commit/380cc422b2c6f7a286db0db3751922d5a6c06543 "The `ScaleManager.updateBounds` method is now called every time the browser fires a 'resize' or 'orientationchange' event").
---
### Author:  [@im-minsung](https://phaser.discourse.group/u/im-minsung)
#### Post date: [February 17, 2022, 5:41pm UTC](https://phaser.discourse.group/t/hitarea-offset-after-window-resized/4137/8 "2022-02-17T17:41:24Z")
function resize() {
let game\_ratio = 640 / 960
let window\_ratio = window.innerWidth / window.innerHeight
let container = document.getElementById(“thegame”)
if (window\_ratio \> game\_ratio) {
container.style.height = window.innerHeight + “px”
} else if (window\_ratio \< game\_ratio) {
container.style.width = window.innerWidth + “px”
container.style.height = window.innerHeight + “px”
}
}
window.addEventListener(“resize”, resize)
let gameConfig = {
type: Phaser.CANVAS,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.RESIZE,
parent: “thegame”,
width: 640,
height: 960
},
}
try this 🙂