Perfect pixel problem with curve path

Phaser 3
1

Try to create two pixel perfect hex-fields, one filled and one only with the border.

In the image you can see in the first row the results i want (exactly! like this) and below the weird results i got:

pixel-perfect
pixel-perfect880×892 4.09 KB

On the last image i darken the antialiased pixels, but i don’t know why they exists on pixel art with antialiasing disabled.

Is it possible to draw the border exaclty as i want it, without the 2 little pixels at the bottom?

Can a polygon be filled without the anialised color values?

import Phaser from 'phaser'

new Phaser.Game({
  backgroundColor: 0xc0c0c0,
  height: 500,
  scene: [ TestScene ],
  type: Phaser.WEBGL,
  width: 500,
  
  antialias: false,
  autoRound: true,
  pixelArt: true,
  roundPixels: true,
  zoom: 6,
})

class TestScene extends Phaser.Scene {
  create() {
    const graphics = this.add.graphics()
    graphics.setVisible(false)

    const rt = this.add.renderTexture(0, 0, 500, 500)
      .setOrigin(0, 0)

    // Filled path
    const filledPath = new Phaser.Curves.Path(34, 0)
    filledPath.lineTo(68, 17)
    filledPath.lineTo(68, 51)
    filledPath.lineTo(34, 68)
    filledPath.lineTo(0, 51)
    filledPath.lineTo(0, 17)
    filledPath.lineTo(34, 0)

    graphics.fillStyle(0x20A020)
    graphics.fillPoints(filledPath.getPoints())

    // Border only (strange coordinates and moving used)
    const borderPath = new Phaser.Curves.Path(33, 0)
    borderPath.lineTo(67, 17)
    borderPath.moveTo(68, 18)
    borderPath.lineTo(68, 50)
    borderPath.moveTo(67, 51)
    borderPath.lineTo(33, 68)
    borderPath.moveTo(35, 68)
    borderPath.lineTo(1, 51)
    borderPath.lineTo(1, 17)
    borderPath.lineTo(35, 0)

    graphics.lineStyle(1, 0x0000ff)
    graphics.strokePoints(borderPath.getPoints())
    
    // darken everything that is not 0x20A020
    graphics.generateTexture('hex', 68, 68)
    const frame = this.textures.get('hex').get()
    for (let y = 0; y < frame.height; y++) {
      for (let x = 0; x < frame.width; x++) {
        const pixel = this.textures.getPixel(x, y, 'hex')
        if (pixel.color > 0 && pixel.color !== 2138144) {
          graphics.fillStyle(0x000000, 0.25)
          graphics.fillPoint(x, y, 1)
        }
      }
    }

    rt.clear()
    rt.draw(graphics, 0, 0)
  }
}