Javascript 如何在模式对话框中将图像添加到画布内部绘制

我可以在画布内画正常的HTML页面。但我的问题是，当我把画布放在模态对话框中时，绘图功能不起作用。 我用这个添加了我的代码。
我不知道这是因为视图重叠。任何关于如何修复此问题的想法都将不胜感激

 var canvas, ctx, flag = false,
   prevX = 0,
   currX = 0,
   prevY = 0,
   currY = 0,
   dot_flag = false;

    var x = "black",
        y = 2;

  $('#edit-question-image').on('show.bs.modal', function (e) {
        var QuestionId = $(e.relatedTarget).data('question-id');
        var photo = $(e.relatedTarget).data('imgsrc');
        $(e.currentTarget).find('input[id="questionId"]').val(QuestionId);
        $(e.currentTarget).find('img[id="canvasimg"]').attr("src", photo);
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        var img = document.getElementById("canvasimg");
        ctx.drawImage(img, 10, 10);
        w = canvas.width;
        h = canvas.height;

        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
        canvas.addEventListener("mouseout", function (e) {
            findxy('out', e)
        }, false);
        
    });
function color(obj) {
        console.log("colour", obj.id)
        switch (obj.id) {
            case "red":
                x = "red";
            case "black":
                x = "black";
                break;
            case "white":
                x = "white";
                break;
        }
        y==2
    }
function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = y;
        ctx.stroke();
        ctx.closePath();
    }

    function erase() {
        var m = confirm("Want to clear");
        if (m) {
            ctx.clearRect(0, 0, w, h);
            document.getElementById("canvasimg").style.display = "none";
        }
    }

    function save() {
        document.getElementById("canvasimg").style.border = "2px solid";
        var dataURL = canvas.toDataURL();
        document.getElementById("canvasimg").src = dataURL;
        document.getElementById("canvasimg").style.display = "inline";
    }

    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;

            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
        if (res == 'up' || res == "out") {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }

HTML代码

<div id="edit-question-image" class="modal fade" role="dialog">
<div class="modal-dialog">
    <div class="modal-content" style="padding: 16px;">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 id="editPhoto-Title" class="sc-badge sc-safe" style="padding: 4px 3px !important;">Modify Photo</h4>
        </div>
        <div class="modal-body">
            <div id="editPhoto-ImgContainer_Q">
                
                    <canvas id="can" width="400" height="400" style="top:10%;left:10%;border:2px solid;"></canvas>
                    <div style="top:12%;left:43%;">Choose Color</div>
                    <div style="top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
                    <div style="top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
                    <div style="top:20%;left:43%;">Eraser</div>
                    <div style="top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
                    <img id="canvasimg" style="position:absolute;top:10%;left:52%; display:none;" >
                    <input type="button" value="save" id="btn" size="30" onclick="save()" style="top:55%;left:10%;">
                    <input type="button" value="clear" id="clr" size="23" onclick="erase()" style="top:55%;left:15%;">
               
        </div>
        <div class="modal-footer">
            <input type="button" id="btnCloseDialogEditPhoto" class="modal-button" style="margin: 8px;" value="Cancel" data-dismiss="modal" />
            <input type="submit" id="btnSaveEditPhoto_Q" class="modal-button" style="margin: 8px; float: right;" value="Submit" data-dismiss="modal" />
        </div>
    </div>
</div>

&时代；
修改照片
选择颜色
橡皮擦