Javascript 在矩形内画对角线

嗨，我正在尝试制作一个绘画应用程序，我们可以在其中绘制直线和矩形，但我有一个问题

第一次绘制矩形或直线时，应按原样绘制，但随后绘制的是带有对角线的矩形

我不明白为什么第一次画好直线或矩形，然后画一个带对角线的矩形

var-storedLines=[]；
var startX=0；
var-startY=0；
var isDown；
var type=“line”；//当前类型
阶级游说国家{
//****首先进行一些设置****
构造器（画布）{
this.canvas=画布；
this.type=type；
this.width=canvas.width；
this.height=canvas.height；
this.ctx=canvas.getContext（'2d'）；
var offsetX=canvas.offsetLeft；
var offsetY=canvas.offsetTop；
this.valid=false；//设置为false时，画布将重新绘制所有内容
this.shapes=[]；//要绘制的对象的集合
this.draging=false；//跟踪拖动的时间
this.selection=null；
this.dragoffx=0；//有关说明，请参阅mousedown和mousemove事件
此参数为0.dragoffy=0；
var myState=this；
this.selectionColor='#CC0000'；
此参数为0.selectionWidth=2；
addEventListener（'selectstart'，函数（e）{e.preventDefault（）；返回false；}，false）；
//向上、向下和移动用于拖动
canvas.addEventListener（'mousedown'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
canvas.style.cursor=“十字线”；
var mouseX=parseInt（e.clientX-offsetX）；
var mouseY=parseInt（e.clientY-offsetY）；
isDown=真；
startX=mouseX；
斯塔蒂=老鼠；
}，对）；
canvas.addEventListener（'mousemove'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
var ctx=canvas.getContext（'2d'）；
如果（！isDown）返回；
myState.redrawStoredLines（）；
var mouseX=parseInt（e.clientX-offsetX）；
var mouseY=parseInt（e.clientY-offsetY）；
如果（类型==“rect”）{
ctx.beginPath（）；
ctx.rect（startX、startY、mouseX-startX、mouseY-startY）；
ctx.stroke（）；
}
如果（类型=“行”）{
ctx.beginPath（）；
ctx.moveTo（startX，startY）；
ctx.lineTo（mouseX，mouseY）；
ctx.stroke（）；
}
}，对）；
canvas.addEventListener（'mouseup'，函数（e）{
canvas.style.cursor=“默认”；
e、 预防默认值（）；
e、 停止传播（）；
isDown=假；
var mouseX=parseInt（e.clientX-offsetX）；
var mouseY=parseInt（e.clientY-offsetY）；
存储线路({
类型：类型，
x1:startX，
y1：startY，
x2:mouseX，
y2：老鼠
});
控制台日志（存储线）；
myState.redrawStoredLines（）；
}，对）；
canvas.addEventListener（'handleMouseOut'，函数（e）{
e、 预防默认值（）；
e、 停止传播（）；
如果（！isDown）返回；
isDown=假；
var mouseX=parseInt（e.clientX-offsetX）；
var mouseY=parseInt（e.clientY-offsetY）；
存储线路({
类型：类型，
x1:startX，
y1：startY，
x2:mouseX，
y2：老鼠
});
myState.redrawStoredLines（）；
}，对）；
}
setType（新类型）{
如果（newtype==='line'）{
this.type=“line”；
} 
如果（newtype==='rect'）{
this.type=“rect”；
console.log（'settype:'+this.type）；
}  
}
重新绘制存储线（）{
var ctx=this.canvas.getContext（'2d'）；
clearRect（0，0，this.canvas.width，this.canvas.height）；
if（storedLines.length==0）返回；
//重新绘制每个存储行
对于（变量i=0；i
正文{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：16px；
}
.集装箱{
利润率：10px；
填充：2px；
边框：实心1px黑色；
背景色：#505050
}
h3{
利润率：10px；
填充：2px；
}
.工具箱{
显示：内联；
列表样式类型：无；
}
.toolbox>li{
显示：内联块；
保证金：0；
垂直对齐：中间对齐；
}
分区滑块分区{
/*边缘顶部：20px*/
显示：内联块；
}
.直列式p{
字体大小：14px；
显示：块；
}
.在线输入{
保证金：5px；
显示：块；
}
#方格{
边缘顶部：20px；
左缘：48%；
宽度：50px；
高度：50px；
背景色：rgb（127127127）；
}
#RGB颜色{
字体大小：14px；
文本对齐：居中；
}
#clearbtn{
宽度：50px；
左缘：48%；
边缘顶部：10px；
}
.canvas{
利润率：10px；
位置：相对位置；
宽度：600px；
高度：400px；
边框：实心1px黑色；
背景色：#ffffff；
光标：十字线；
}
#库德{
文本对齐：居中；
}

绘图形状


行

矩形


（X，Y）：（0，0）


var p =  new CanvasState(document.getElementById('mainCanvas'),type);

handleMouseUp(event, type) {
  // Here your code for mouseUp
  // Edit the references to use the fields from "this"
}

canva.addEventListener("mouseup", (e) => this.handleMouseUp(e, this.type), true);

clone = div.cloneNode(false);// setting false will not clone child element and event handlers.