Sprite Tint on Canvas

[Rodrigo]

Hello,

I'm seeing this behaviour that I can't understand, when applying a tint color to a sprite while using canvas as renderer. Right now for CORS reasons we're forced to use canvas in our app. I say this because in webgl the issue doesn't happen.

The thing is the we're cutting images into stripes and applying a tint to each stripe, but this creates a line between the stripes:

https://codepen.io/rhernando/pen/8fb06d28861d63ca5a6868f88c71f150?editors=0010

Just click the button to apply/remove the tint and you'll see the issue.

Why this happens?, is there a way around this or is just what we get in canvas?

Best,
Rodrigo.

[ivan.popelyshev]

The problem is extra canvas for tinting, that is bigger than our image part and filtering consumes one more pixel at the edge. I cant explain it properly, but you have to "extrude" your image a bit, modify CanvasTinter class.

[Rodrigo]

Hi Ivan and thanks for the answer!!

So what I gather from your answer and the code in the CanvasTinter class, is the following.

I checked the sizes being used and applied by crop and canvas in these lines (https://github.com/pixijs/pixi.js/blob/dev/src/core/sprites/canvas/CanvasTinter.js#L78-L125?

const crop = texture._frame.clone();
const resolution = texture.baseTexture.resolution;

crop.width *= resolution;
crop.height *= resolution;

canvas.width = Math.ceil(crop.width);
canvas.height = Math.ceil(crop.height);

And while crop uses floating points, canvas uses round numbers. I assume that this is because the canvas per-se uses a bitmap representation that can't use floating numbers, right? (sorry if I'm wrong about this, but canvas is not really something I'm very experienced with).

So basically the solution is turn the stripes dimensions to round numbers (which will mean stretching them out a bit out of the renderer by a few px) and problemo solved, right?

Best,
Rodrigo.

[ivan.popelyshev]

Yes, that's good solution!