problem description

recently, in the project, we need to use canvas to drag and drop and zoom the picture, and to be able to draw the path on the picture, but after I drag and drop the path, I will clear the previous path

the environmental background of the problems and what methods you have tried

after checking, it is found that the canvas context.clearRect (0,0, canvas.width, canvas.height);,) will be emptied first every time the drag-and-drop operation is carried out. When this sentence is commented out, the picture will be infinitely dragged and copied. Please see if there is any solution to make the two compatible

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< html >
< head >

<meta charset="utf-8">
<title></title>
<style>
  span{
      display: inline-block;
      width: 50px;
      line-height: 40px;
      color: -sharpfff;
      background: -sharpccc;
      margin: 20px;
      text-align: center;
      cursor: pointer;
  }
</style>

< / head >

< body >
< div id= "testid" >
< div id= "div1" style= "width:100px; height:20px;" > < / div >

    <div>
       <span onclick="move()"></span>
       <span onclick="draw()"></span>
    </div>

< canvas id= "canvas" width= "800" height=" 800" style= "margin-left:20px; margin-top:20px;border: 1px solid-sharp000" onMouseMove= "cnvs_getCoordinates (event);" > < / canvas >
< / div >
< script type= "text/javascript" >

    var canvas, context;
    var img,//
        icon,//
        imgIsLoaded,//;
        iconIsLoaded,//icon;
        imgX = 0,
        imgY = 0,
        imgScale = 1;
        initX = 50;
        initY = 50;
        iconX = initX;
        iconY = initY;
        isDrag = true;//
        var color=0;//
        var X,Y,X1,Y1;//
        var isMouseDown=false;//
        var flag=0;//
    (function int() {
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");
        loadImg();
    })();
    function move(){
        isDrag = true;
    }
    function draw(){
        isDrag = false;
    }
    //   
    function drowline(num1,num2,num3,num4){
        //
        if(flag)
            context.beginPath();
        //
        context.moveTo(num1,num2);
        context.lineWidth=2;
        if(color==0){
            context.strokeStyle="red";
        }else if(color==1){
            context.strokeStyle="green";
        }else if(color==2){
            context.strokeStyle="blue";
        }
        //
        context.lineTo(num3,num4);
        //
        context.stroke();

        if(flag!=0){
            X=X1;
            Y=Y1;
        }
    }         
    //
    function loadImg() {
        img = new Image();
        img.onload = function () {
            imgIsLoaded = true;
            drawImage();
        }
        img.src = "../assets/img/insert.png"; //
        icon = new Image();
        icon.onload = function () {
            iconIsLoaded = true;
            drawImage();
        }

        icon.src = "../assets/img/addimg.png"; // 
    }

    function drawImage() {
        if(isDrag){
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.drawImage(img, 0, 0, img.width, img.height, imgX, imgY, img.width * imgScale, img.height * imgScale);
        context.drawImage(icon, iconX, iconY);
        }
    }

    canvas.onmousedown = function (event) {
        if(isDrag){
         var pos = windowToCanvas(canvas, event.clientX, event.clientY);
        canvas.onmousemove = function (event) {
            canvas.style.cursor = "move";
            var pos1 = windowToCanvas(canvas, event.clientX, event.clientY);
            var x = pos1.x - pos.x;
            var y = pos1.y - pos.y;
            pos = pos1;
            imgX += x;
            imgY += y;
            iconX = imgX + initX;
            iconY = imgY + initY;
            drawImage();
        }
        canvas.onmouseup = function () {
            canvas.onmousemove = cnvs_getCoordinates;
            canvas.onmouseup = null;
            canvas.style.cursor = "default";
        }
     }else{
        isMouseDown=true;
        X= event.offsetX;
        Y= event.offsetY;
        canvas.onmousemove = function (event) {
            if(isMouseDown){
            X1= event.offsetX;
            Y1= event.offsetY;
            drowline(X,Y,X1,Y1);
            flagPP;
           }   
        };
        canvas.onmouseup=function () {
            isMouseDown=false;
            flag=0;
        }
     }
        
    }
    canvas.onmousewheel = canvas.onwheel = function (event) {
        var pos = windowToCanvas(canvas, event.clientX, event.clientY);
        event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltaY * (-40));
        if (event.wheelDelta > 0) {
            imgScale *= 2;
            imgX = imgX * 2 - pos.x;
            imgY = imgY * 2 - pos.y;
            initX = initX * 2;
            initY = initY * 2;
            iconX = imgX + initX;
            iconY = imgY + initY;
        } else {
            imgScale /= 2;
            imgX = imgX * 0.5 + pos.x * 0.5;
            imgY = imgY * 0.5 + pos.y * 0.5;
            initX = initX / 2;
            initY = initY / 2;
            iconX = imgX + initX;
            iconY = imgY + initY;
        }
        drawImage();
    }

    function windowToCanvas(canvas, x, y) {
        var bbox = canvas.getBoundingClientRect();
        return {
            x: x - bbox.left - (bbox.width - canvas.width) / 2,
            y: y - bbox.top - (bbox.height - canvas.height) / 2
        };
    }

    function cnvs_getCoordinates(event) {
        var pos = windowToCanvas(canvas, event.clientX, event.clientY);
        var w = iconX + icon.width;
        var h = iconY + icon.height;
        var mydiv = document.getElementById("div1");
        mydiv.innerHTML = "eventX=" + pos.x + "eventY=" + pos.y + "iconX=" + iconX + "iconY=" + iconY;
        if (pos.x >= iconX && pos.x <= w && pos.y >= iconY && pos.y <= h) {
            // iconabc
            mydiv.innerHTML = "abc";
        } else {

        }
    }
    

< / script >
< / body >

< / html >

what result do you expect? What is the error message actually seen?

I hope the changed code can drag and drop the picture, and then continue to draw according to the path drawn in the previous step