Optimize trimCanvas

[SuperSodaSea]

Description of change

Optimize trimCanvas, using the implementation in https://gist.github.com/timdown/021d9c8f2aabc7092df564996f5afbbf. Also a new test for trimming empty canvas is added.

Closes #8815.

Pre-Merge Checklist

• Tests and/or benchmarks are included
• Lint process passed (npm run lint)
• Tests passed (npm run test)

[SuperSodaSea]

I believe this is a bug in the old implementation. Since it is drawn by context.fillRect(10, 20, 10, 5), the width should be 10.

pixijs/packages/utils/src/media/trimCanvas.ts

Lines 64 to 71 in e2f27bf

	if (bound.right === null)
	{
	bound.right = x + 1;
	}
	else if (bound.right < x)
	{
	bound.right = x + 1;
	}

Should be bound.right < x + 1 here in the old implementation.

Anyway, with the new implementation in this PR, we can get the correct width.

[bigtimebuddy]

Yeah, good point!

[bigtimebuddy]

This is awesome. Would be nice to see a performance comparison? How much faster is this?

[SuperSodaSea]

It would be roughly (all pixels) / (trimmed pixels) times faster in my opinion. Since it won't be much empty space when trimming text, it can be a huge boost. Is there a good tool / library for making a benchmark?

[bigtimebuddy]

I don't know something off-hand. There's a benchmark npm package you could try? I'm not looking for anything that rigorous, mostly to understand how much faster relative to current.

[bigtimebuddy]

Here's a quick performance comparison:

v7.0.4: https://jsfiddle.net/bigtimebuddy/04vm18x6/ (15.038s)
PR: https://jsfiddle.net/bigtimebuddy/tqxbdfcg/ (14.206s)

This doesn't seem like a huge performance improvement (<10%). Could you run it and see if you see something similar?

[bigtimebuddy]

This works, it's less code, and you fixed the off-by-one error. LGTM.

[SuperSodaSea]

@bigtimebuddy Similar result here. However, using ctx.rect(10, 10, 780, 580) I got 37.21s vs 22.989s, ~30% speed up. The fewer pixels are trimmed, the greater the speed improvement. The remaining time should be the cost of getImageData.