HTML程式碼：

<canvas id="cvs" width="400" height="400" style="margin:20px auto; display: block;">
</canvas>

JS程式碼

<script type="text/javascript" th:inline="javascript">

    // 畫點
    function draw_point(ctx, point) {
        console.log(point);
        //設定繪製顏色
        ctx.fillStyle=
 
"#fb0606";
        //繪製成矩形
        // ctx.arc(point.x, point.y,5, 0, Math.PI * 5);
        ctx.fillRect(point.x-4,point.y-4,8,8);
        //設定字型樣式
        ctx.font = "12px bold 宋體";
        //繪製文字
        ctx.fillText("("+point.x+","+point.y+")",point.x,point.y);
        // ctx.fill();
    }

    // 劃線
    function
 
 getLine(ctx, prevXY, nextXY) {
        ctx.beginPath();
        ctx.strokeStyle="#0000FF";
        ctx.moveTo(prevXY.x, prevXY.y);
        ctx.lineTo(nextXY.x, nextXY.y);
        ctx.stroke();
    }


    layui.use(['form', 'layedit', 'upload', 'laydate'], function() {
        let form = layui.form
            ,
 
 layer = layui.layer
            , laydate = layui.laydate
            , $ = layui.jquery
            , upload = layui.upload;

        let date_list = [];
        let canvas = document.getElementById("cvs");
        let ctx = canvas.getContext("2d");
        ctx.globalCompositeOperation="source-over";
        let img = new Image();

        // 點選載入地圖
        $("#get_map").click(function () {
            let id = $("#gameMapUrl").val();
            date_list = [];
            $.get(context+"/game/point_map/"+id, function (res) {
                ctx.clearRect(0,0,canvas.width,canvas.height);
                img.src = res.extend.msg.mapUrl;
                // 定時器載入圖片
                setTimeout(function(){
                    var naturalWidth = img.width;
                    var naturalHeight = img.height;
                    canvas.width = naturalWidth;
                    canvas.height = naturalHeight;
                    ctx.drawImage(img, 0, 0, naturalWidth, naturalHeight);
                },3000);
            });
        });


        // 地圖畫線
        canvas.addEventListener("click", function(event) {
            let ev = event || window.event;
            let x, y;
            x = ev.clientX - canvas.getBoundingClientRect().left;
            y = ev.clientY - canvas.getBoundingClientRect().top;
            let point = {x : x, y : y};
            console.log(point);
            draw_point(ctx, point);
            if(date_list.length > 0){
                getLine(ctx, date_list[date_list.length-1], point);
            }
            date_list.push(point);
            console.log(date_list);
            console.log(date_list.length);
        });



        // 刪除線和點
        $("#del_map_point").click(function () {
            if(date_list.length > 0){
                let point_date = date_list.pop();
                console.log(point_date);
                ctx.clearRect(point_date.x-4, point_date.y-4, 8, 8);
            }
        })

    })
</script>

使用了Layui的ui框架，不影響使用，可以自己使用ajax提交請求！
但是在清除畫的點和畫的線，效果不好，有那個大佬知道，請不吝賜教，感謝！