Javascript 如何不对多个图形使用canvas clearRect（）？

我想使用画布在图像上绘制多个图形

在我的代码中，我使用

ctx.clearRect（0,0，canvas.width，canvas.height）
因此，它不允许我绘制多个图形。如果我没有使用
clearRect（）
，程序将无法正常工作。此外，我还试图更改
clearRect（）
的位置，但它对我也不起作用

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.clearRect(0,0,canvas.width,canvas.height); //clear canvas
ctx.beginPath();
var width = mousex-last_mousex;
var height = mousey-last_mousey;
ctx.rect(last_mousex,last_mousey,width,height);
ctx.strokeStyle = "blue";
ctx.lineWidth = 10;
ctx.stroke();


//画布
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//变数
var canvasx=$（canvas.offset（）.left；
var canvasy=$（canvas.offset（）.top；
var last_mousex=last_mousey=0；
var mousex=mousey=0；
var mousedown=false；
//穆斯敦
$（画布）.on（'mousedown'，函数（e）{
last_mousex=parseInt（e.clientX-canvasx）；
last_mousey=parseInt（例如clientY-canvasy）；
mousedown=true；
});
//鼠标
$（画布）.on（'mouseup'，函数（e）{
mousedown=false；
});
//鼠标移动
$（画布）.on（'mousemove'，函数（e）{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
var width=mousex-最后一个mousex；
变量高度=鼠标-最后一个鼠标；
ctx.rect（最后一个鼠标、最后一个鼠标、宽度、高度）；
ctx.strokeStyle=“蓝色”；
ctx.线宽=10；
ctx.stroke（）；
}
//输出
$（'#output'）.html（'current:'+mousex+'，'+mousey+'
last:'+last_mousex+'，'+last_mousey+'
mousedown:'+mousedown）；
});
画布{
光标：十字线；
边框：1px实心#000000；
背景图片：url（“kroki2v3.png”）；
背景重复：无重复；
}
您必须在数组中存储每个矩形的位置和大小，并通过循环打印


jQuery（文档）.ready（函数（$）{
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
ctx.clearRect（0,0，canvas.width，canvas.height）；//清除画布
ctx.beginPath（）；
变量宽度=mousex-last\u mousex；
变量高度=鼠标-最后一个鼠标；
ctx.rect（最后一个鼠标、最后一个鼠标、宽度、高度）；
ctx.strokeStyle=“蓝色”；
ctx.线宽=10；
ctx.stroke（）；
//帆布
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
//变数
var canvasx=$（canvas.offset（）.left；
var canvasy=$（canvas.offset（）.top；
var last_mousex=0；
var last_mousey=0；
var-mousex=0；
var-mousey=0；
var mousedown=false；
变量形状=[]；
var宽度；
变异高度；
//穆斯敦
$（画布）.on（'mousedown'，函数（e）{
last_mousex=parseInt（e.clientX-canvasx）；
last_mousey=parseInt（例如clientY-canvasy）；
mousedown=true；
});
//鼠标
$（画布）.on（'mouseup'，函数（e）{
常量lastPos={
lastMouseX:last_mousex，
最后的老鼠：最后的老鼠，
宽度：宽度，
高度：高度
}
形状。推（lastPos）；
mousedown=false；
});
//鼠标移动
$（画布）.on（'mousemove'，函数（e）{
mousex=parseInt（e.clientX-canvasx）；
mousey=parseInt（例如clientY-canvasy）；
如果（鼠标向下）{
clearRect（0，0，canvas.width，canvas.height）；
ctx.beginPath（）；
宽度=鼠标-最后一个鼠标；
高度=鼠标-最后一个鼠标；
如果（shapes.length>0）{
用于（形状中的变量i）{
ctx.rect（形状[i].lastMouseX，形状[i].lastMouseY，形状[i].rectWidth，形状[i].rectHeight）；
}
}
ctx.rect（最后一个鼠标、最后一个鼠标、宽度、高度）；
ctx.strokeStyle=“蓝色”；
ctx.线宽=10；
ctx.stroke（）；
}
//输出
$（'#output'）.html（'current:'+mousex+'，'+mousey+'
last:'+last_mousex+'，'+last_mousey+'
mousedown:'+mousedown）；
});
});
画布{
光标：十字线；
边框：1px实心#000000；
背景图片：url（“kroki2v3.png”）；
背景重复：无重复；
}
感谢您的回复。我没有想到push（）方法。