原生JS双画布反射图像时setTransform视觉异常，matrixTransform应用于原始坐标却正常的问题求助

大家好，我最近在做一个原生JavaScript的双画布项目，遇到了一个搞不懂的问题，想请教下各位前辈：

我的项目里有两个canvas元素：

• 第一个画布：用户可以在上面的图像上绘制任意直线，用这条直线分割画布得到若干图像块
• 第二个画布：用来绘制这些分割出来的图像块，其中部分块需要围绕分割线做反射处理（我自己写了reflectPiece函数来处理块的反射逻辑）

我尝试了两种实现反射绘制的方式，结果却大相径庭：

1. 方式一（出现异常）：我先把反射后的图像块的点直接绘制到第二个画布，然后调用setTransform方法，传入通过getReflectionMatrix生成的反射矩阵，本以为这样做完就能正常对图像做后续的旋转/缩放操作，但实际呈现的视觉效果完全不符合预期，反射的位置和形态都有问题。
2. 方式二（效果正常）：如果我直接用matrixTransform方法，把反射矩阵应用到每个原始坐标点上，得到变换后的坐标再绘制到第二个画布，最终的反射效果就是完全正确的。

我现在特别困惑：为什么同样是应用同一个反射矩阵，两种方式的结果会不一样？是不是我对Canvas的setTransform的工作逻辑理解错了？有没有大佬能帮我梳理清楚这里的问题，或者给我指条正确的实现思路？

内容来源于stack exchange