# strokePoints outside of defined coordinates

**URL:** <https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606>\
**Category:** Phaser 3\
**Created:** [May 20, 2026, 12:55pm UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606 "2026-05-20T12:55:31Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![VanFraecker](https://avatars.discourse-cdn.com/v4/letter/v/13edae/32.png) [@VanFraecker](https://phaser.discourse.group/u/VanFraecker)\
**Post date:** [May 20, 2026, 12:55pm UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606/1 "2026-05-20T12:55:31Z")

</div>

Found here a similar problem, but without any reply.

Right is a hex image. Left the same, but with a red debug line, but the coordinates not match. It paints the red line on the left side -1px

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d41e471dbb0b280f05efd115de25d1459b9a06b4.png)

```javascript
    const points = [16, 0, 32, 8, 32, 17, 16, 25, 15, 25, 0, 17, 0, 8]

    const vectorPoints: Phaser.Math.Vector2[] = []
    for (let i = 0; i < points.length; i += 2) {
      vectorPoints.push(new Phaser.Math.Vector2(points[i]!, points[i + 1]!))
    }

    const debugGraphics = this.add.graphics()
    debugGraphics.lineStyle(1, 0xff3333, 1)
    debugGraphics.setPosition(10, 10)
    debugGraphics.strokePoints(vectorPoints, true)

```

What did i do wrong?

config

```javascript
  antialias: false,
  pixelArt: true,
  roundPixels: true,
  type: Phaser.WEBGL,

```

And my other problem is, when i use that coordinates to define the interactive shape, the shape is not exact

```javascript
tile.setInteractive(new Geom.Polygon(points, Geom.Polygon.Contains)

```

---

<div class="post-metadata">

**Author:** ![gamesanova](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/gamesanova/32/9295_2.png) [@gamesanova](https://phaser.discourse.group/u/gamesanova)\
**Post date:** [May 21, 2026, 12:11am UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606/2 "2026-05-21T00:11:46Z")

</div>

Seems like something likely off with the vector coordinates, did you console this out:

new Phaser.Math.Vector2(points[i]!, points[i + 1]!)

to see what coordinates it’s actually giving ?

---

<div class="post-metadata">

**Author:** ![VanFraecker](https://avatars.discourse-cdn.com/v4/letter/v/13edae/32.png) [@VanFraecker](https://phaser.discourse.group/u/VanFraecker)\
**Post date:** [May 21, 2026, 6:18am UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606/3 "2026-05-21T06:18:37Z")

</div>

console.log is correct:

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/d/d8cf3040d8f4c09717b159ab8fc4e6b954205d81.png)

but 0,17 to 0,8 is painted at -1,17 to -1,8.

What works is this: 0.01

```javascript
const points = [16, 0, 32, 8, 32, 17, 16, 25, 15, 25, 0.01, 17, 0.01, 8]

```

I don’t think that’s the point of writing it that way.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [May 21, 2026, 3:14pm UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606/4 "2026-05-21T15:14:43Z")

</div>

> [@VanFraecker](#):
>
> It paints the red line on the left side -1px

I think that might be unavoidable with WebGL pixel-art rendering. You could use a bitmap image instead.

> [@VanFraecker](#):
>
> when i use that coordinates to define the interactive shape, the shape is not exact

You can verify with

```
this.input.enableDebug(tile)

```

---

<div class="post-metadata">

**Author:** ![VanFraecker](https://avatars.discourse-cdn.com/v4/letter/v/13edae/32.png) [@VanFraecker](https://phaser.discourse.group/u/VanFraecker)\
**Post date:** [May 21, 2026, 3:57pm UTC](https://phaser.discourse.group/t/strokepoints-outside-of-defined-coordinates/15606/5 "2026-05-21T15:57:31Z")

</div>

When i set to non pixel rendering you can see it,that the “halve” pixel of the stroke is antialiased painted (what is in that mode correct), only in pixel art view it is wrong.

 ![image](https://global.discourse-cdn.com/free1/uploads/phaser1/original/2X/f/f13f68c7d00c4d7e5d4fc14de94ce617cbe44f27.png)

The mouse cursor is a little bit outside of the 1px stroke, and it activates the over effect

But not a huge problem, only when you play on this zoom level 😉

I can live with that. I was only curious because the line stroke of the polygon was wrong.