這個範例透過 image onload 事件（搭配 Promise 實作）
保證圖片載入後才開始與使用者互動
這樣就能避免不斷用 setInterval 重繪

另外 Canvas.ImageData 可以記錄目前 canvas 畫面
所以我沒有用 Marker Array 紀錄
（因為我不知道你需求，如果還需要刪除先前的點，那可能還是要回到陣列紀錄每次的操作）

var canvas = document.getElementById('Canvas');
var context = canvas.getContext("2d");
var imageData = null; //紀錄 canvas 畫面用（不含文字框）
var mapSprite = null; //儲存載入的圖片
var markerSprite = null; //儲存載入的圖片

var Marker = function () {
    this.Sprite = markerSprite;
    this.Width = 12;
    this.Height = 20;
    this.XPos = 0;
    this.YPos = 0;
}

var mouseClicked = function (mouse) {
    // Get corrent mouse coords
    var rect = canvas.getBoundingClientRect();
    var mouseXPos = (mouse.x - rect.left);
    var mouseYPos = (mouse.y - rect.top);

    console.log("Marker added");

    // Move the marker when placed to a better location
    var marker = new Marker();
    marker.XPos = mouseXPos - (marker.Width / 2);
    marker.YPos = mouseYPos - marker.Height;

    draw(marker);
}

var initCanvas = function () {
    context.font = "15px Georgia";
    context.textAlign = "center";
    // Clear Canvas
    context.fillStyle = "#000";
    context.fillRect(0, 0, canvas.width, canvas.height);

    // Draw map
    // Sprite, X location, Y location, Image width, Image height
    // You can leave the image height and width off, if you do it will draw the image at default size
    context.drawImage(mapSprite, 0, 0, 700, 700);

    //儲存畫面到 imageData
    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
}

var draw = function (markerObject) {
    //把先前的畫面貼到 canvas
    context.putImageData(imageData, 0, 0);
    // Draw markers
    context.drawImage(markerObject.Sprite, markerObject.XPos, markerObject.YPos, markerObject.Width, markerObject.Height);
    //儲存畫面到 imageData，此時沒有文字
    imageData = context.getImageData(0, 0, canvas.width, canvas.height);
    // Calculate postion text
    var markerText = "Postion (X:" + markerObject.XPos + ", Y:" + markerObject.YPos + ")";

    // Draw a simple box so you can see the position
    var textMeasurements = context.measureText(markerText);
    context.fillStyle = "#666";
    context.globalAlpha = 0.7;
    context.fillRect(markerObject.XPos - (textMeasurements.width / 2), markerObject.YPos - 15, textMeasurements.width, 20);
    context.globalAlpha = 1;

    // Draw position above
    context.fillStyle = "#000";
    context.fillText(markerText, markerObject.XPos, markerObject.YPos);
};

var loadImage = function (url) {
    return new Promise(function (resolve, reject) {
        var image = new Image();
        image.onload = function (evt) {
            resolve(evt.target);
        }
        image.onerror = reject;
        image.src = url;
    });
}

Promise.all([
    loadImage("tee.png"),
    loadImage("point.png"),
]).then(function (imageArr) {
    //讀取完圖片後，設定到 mapSprite, markerSprite
    mapSprite = imageArr[0];
    markerSprite = imageArr[1];
    //初始化 canvas
    initCanvas();
    //準備完成才添加事件，允許使用者操作
    canvas.addEventListener("mousedown", mouseClicked, false);
}).catch(function () {
    alert("發生錯誤");
});