Javascript 如何在画布中将轴更改为左下角后修复鼠标事件

我必须通过执行以下操作来更改html画布上的轴

context.translate(0, canvas.height);
context.scale(1,-1);

所以画布会倒过来，现在的问题是，当我想画一个矩形时，鼠标事件不匹配。就像我把鼠标放在画布底部时，矩形会出现在顶部

谁能帮帮我吗。 请给我一些指导或参考

我使用这个链接作为参考

下面是代码片段：

var ColorCanvas=document.getElementById（'ColorCanvas'）；
var ctx1=ColorCanvas.getContext（'2d'）；
var TransCanvas=document.getElementById（'TransCanvas'）；
var ctx2=TransCanvas.getContext（'2d'）；
var rect={}，
阻力=假；
var bg=新图像（）；
bg.src=“jellyish.jpg”；
bg.onload=函数（）{
ctx1.drawImage（bg，0，0）；
}
变量注释={
x:0,，
y:0，
w:0，
h:0，
a:这个，
打印坐标：函数（）{
log（`X:${this.X}px，Y:${this.Y}px，宽度：${this.w}px，高度：${this.h}px`）；
}     
};
//所有矩形的数组
变量边界框=[]；
//实际矩形，即正在绘制的矩形
var o={}；
//用于存储鼠标位置的变量
var m={}，
//用于存储开始绘制矩形的点的变量
开始={}；
//布尔值
var isDrawing=错误；
ctx2.平移（0，经血管高度）；
ctx2.刻度（1，-1）；
功能手柄向下（e）{
开始=oMousePos（TransCanvas，e）；
isDrawing=true；
}
功能手柄移动（e）{
if（isDrawing）{
m=oMousePos（经坎瓦斯，e）；
draw（）；
}
}
功能handleMouseUp（e）{
isDrawing=false；
如果（BoundingBox.length<2）{
var-box=Object.create（注释）；
box.x=o.x；
方框y=o.y；
盒子w=o.w；
框h=o.h；
边界框。推（框）；
draw（）；
box.printCoordinates（）；
}
}
函数绘图（）{
if（boundingBoxes.length{drawRect（r）}）
//绘制实际的矩形
ctx2.fillRect（x，TransCanvas.height-y，size，size）；
drawRect（o）；
}
}
TransCanvas.addEventListener（“鼠标向下”，把手向下）；
TransCanvas.addEventListener（“mousemove”，handleMouseMove）；
TransCanvas.addEventListener（“鼠标”，handleMouseUp）；
函数drawRect（o）{
ctx2.beginPath（o）；
ctx2.strokeStyle=“黑色”；
ctx2.lineWidth=1；
ctx2.rect（o.x，o.y，o.w，o.h）；
ctx2.stroke（）；
}
//用于检测鼠标位置的函数
功能oMousePos（TransCanvas、evt）{
var ClientRect=TransCanvas.getBoundingClientRect（）；
返回{
x:Math.round（evt.clientX-ClientRect.left），
y:Math.round（evt.clientY-ClientRect.top）
}
}

#TransCanvas{
位置：绝对位置；
背景色：rgba（255255,0.1）；
左：0；
排名：0；
}
#彩色帆布{
位置：绝对位置；
左：0；
排名：0；
}
#向下{
位置：绝对位置；
右：0px；
}
身体{
背景颜色：象牙色；
}

---

使用

e.clientY

使用

TransCanvas.height-e.clientY

 // Function to detect the mouse position
    function oMousePos(TransCanvas, evt) {
        var ClientRect = TransCanvas.getBoundingClientRect();
        return {
            x: Math.round(evt.clientX - ClientRect.left),
            y: canvas.height-Math.round(evt.clientY - ClientRect.top)
        }
    }

var ColorCanvas=document.getElementById（'ColorCanvas'）；
var ctx1=ColorCanvas.getContext（'2d'）；
var TransCanvas=document.getElementById（'TransCanvas'）；
var ctx2=TransCanvas.getContext（'2d'）；
var rect={}，
阻力=假；
var bg=新图像（）；
bg.src=“jellyish.jpg”；
bg.onload=函数（）{
ctx1.drawImage（bg，0，0）；
}
变量注释={
x:0,，
y:0，
w:0，
h:0，
a:这个，
打印坐标：函数（）{
log（`X:${this.X}px，Y:${this.Y}px，宽度：${this.w}px，高度：${this.h}px`）；
}     
};
//所有矩形的数组
变量边界框=[]；
//实际矩形，即正在绘制的矩形
var o={}；
//用于存储鼠标位置的变量
var m={}，
//用于存储开始绘制矩形的点的变量
开始={}；
//布尔值
var isDrawing=错误；
ctx2.平移（0，经血管高度）；
ctx2.刻度（1，-1）；
功能手柄向下（e）{
开始=oMousePos（TransCanvas，e）；
isDrawing=true；
}
功能手柄移动（e）{
if（isDrawing）{
m=oMousePos（经坎瓦斯，e）；
draw（）；
}
}
功能handleMouseUp（e）{
isDrawing=false；
如果（BoundingBox.length<2）{
var-box=Object.create（注释）；
box.x=o.x；
方框y=o.y；
盒子w=o.w；
框h=o.h；
边界框。推（框）；
draw（）；
box.printCoordinates（）；
}
}
函数绘图（）{
if（boundingBoxes.length{drawRect（r）}）
//画出实际的