# Polygon and wrong hitArea

**URL:** <https://phaser.discourse.group/t/polygon-and-wrong-hitarea/8645>\
**Category:** Phaser 3\
**Created:** [January 15, 2021, 10:14am UTC](https://phaser.discourse.group/t/polygon-and-wrong-hitarea/8645 "2021-01-15T10:14:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![robatt](https://avatars.discourse-cdn.com/v4/letter/r/ecc23a/32.png) [@robatt](https://phaser.discourse.group/u/robatt)\
**Post date:** [January 15, 2021, 10:14am UTC](https://phaser.discourse.group/t/polygon-and-wrong-hitarea/8645/1 "2021-01-15T10:14:09Z")

</div>

I’m trying to create a GameObject represented as a polygon, and I want to highlight it on mouse-over. I tried this:

```
    var points = [-50, -50, 0, -50, 50, 0, 0, 50, -50, 50]
    var pl = scene.add.polygon(400, 1200, points, 0xFF0000)
    pl.setInteractive(pl.points, Phaser.Geom.Polygon.Contains)
    pl.on(Phaser.Input.Events.GAMEOBJECT_POINTER_OVER, function(){pl.fillColor = 0xFF6060} , this)
    pl.on(Phaser.Input.Events.GAMEOBJECT_POINTER_OUT, function(){pl.fillColor = 0xFF0000}, this)
    scene.input.enableDebug(pl, 0xff00ff)

```

However, I see the debug is showing me the hit area is actually a rectangle with the upper right corner at coordinate (0, 0, w=100, h=100). I tried playing with `setOrigin` on the polygon, but it shift both the filled polygon and the hit area.

1. How do I center the hit area around my polygon?
2. why is the hit area not reflecting the shape of the polygon (i.e. is rectangular)?

---

<div class="post-metadata">

**Author:** ![Telinc1](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/telinc1/32/60_2.png) [@Telinc1](https://phaser.discourse.group/u/Telinc1)\
**Post date:** [January 15, 2021, 11:31am UTC](https://phaser.discourse.group/t/polygon-and-wrong-hitarea/8645/2 "2021-01-15T11:31:50Z")

</div>

The Shape game objects (in this case, `Phaser.GameObjects.Polygon`) are not equivalent to the logical geometry objects (`Phaser.Geom.Polygon`). Your callback, `Phaser.Geom.Polygon.Contains`, expects a logical polygon object, not a set of points. Moreover, Shape game objects don’t have a `points` property. As a result, you’re passing `undefined` as the shape, so Phaser defaults to a rectangle and ignores the callback.

Replace `pl.points` with [`pl.geom`](https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Polygon.html#geom). In a more complicated scenario, [like in this example](http://labs.phaser.io/view.html?src=src/input/mouse/polygon%20hit%20area.js), you can also create a `Phaser.Geom.Polygon` yourself.

---

<div class="post-metadata">

**Author:** ![robatt](https://avatars.discourse-cdn.com/v4/letter/r/ecc23a/32.png) [@robatt](https://phaser.discourse.group/u/robatt)\
**Post date:** [January 16, 2021, 7:45am UTC](https://phaser.discourse.group/t/polygon-and-wrong-hitarea/8645/3 "2021-01-16T07:45:54Z")

</div>

Thank you Telinc1, that worked!