One of the ways to fix "small seams"

[ivanpopelyshev]

• Abutting vector shapes create a small seams which make it possible to see the color underneath (similar to EaselJS)

As far as I know, if you draw vector shapes in separate canvas and then filter all pixels, that way if alpha is >0.5 it becomes 1, that issue will be resolved.

Imagine that we have a point on the 2 edge of vector shapes, (color1, alpha1) and (color2, alpha2) where alpha1+alpha2 = 1. Blending makes the color equals to (color1 * alpha1 + color2 * alpha2) / (alpha1+alpha2), but new alpha is 1-(1-alpha1) * (1-alpha2)=1-alpha1 * alpha2 which is not 1. If we filter it, that problem will be solved :)

That's corresponding code for SVG:

  <filter id="filter">
    <feComponentTransfer color-interpolation-filters="sRGB">
       <feFuncA type="table" tableValues="0 1 1"></feFuncA>
    </feComponentTransfer>
  </filter>

I dont know how to make it in pixi yet.

[ericente]

That is an interesting solution to that issue, though it could potentially get computationally expensive. The easiest solution to the abutting vector issues with EaselJS and Pixi.js seems to be adjusting the art to have the edges of the vectors overlap instead of perfectly abutting.