canvas鼠标绘制矩形如何让他可以绘制多个？

Question

我在网上找到了canvas绘制矩形的代码，但是canvas只能画一个，每次重新画上次那个就消失了，如何让他一个canvas可以画多个。
代码如下
https://jsrun.net/xLTKp/edit

Answer 1

就因为这里咯。他下次绘制就是会清除再绘制。

---

那么就保留一下咯 https://jsrun.net/DLTKp/edit

Answer 2

没学过canvas我改了一行代码，可以画多个但是如果绘画区域有框的话，还是会被清除

function myDrect(e){
            myPaint.p2.x = e.offsetX;
            myPaint.p2.y = e.offsetY;
            myPaint.ctx.width = myPaint.width;
            myPaint.ctx.height = myPaint.height;
            myPaint.ctx.fillStyle = '#FF0000';
            myPaint.ctx.strokeStyle = '#FF0000';
            var width = Math.abs(myPaint.p1.x-myPaint.p2.x);
            var height = Math.abs(myPaint.p1.y-myPaint.p2.y);
            // console.log(myPaint.canvas.width,myPaint.canvas.height)
            // 这里下面这一行被改了
            myPaint.ctx.clearRect(myPaint.p1.x,myPaint.p1.y,width,height);
            myPaint.ctx.beginPath();
            if(myPaint.p2.x>=myPaint.p1.x){
                if(myPaint.p2.y>=myPaint.p1.y){
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,width,height);
                }else{
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,width,-height);
                }
            }else{
                if(myPaint.p2.y>=myPaint.p1.y){
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,-width,height);
                }else{
                    myPaint.ctx.rect(myPaint.p1.x,myPaint.p1.y,-width,-height);
                }
 
            }
            myPaint.ctx.stroke();
            myPaint.ctx.save();
        }