jCanvas вызывает дополнительные события при наведении курсора мыши

Код запускается при перемещении мыши, потому что jCanvas перерисовывает холст на mousemove. Это связано с наличием перетаскиваемого слоя или слоя с определенным mousemove вызовом mousemove. Кроме того, обратный вызов load() запускается всякий раз, когда изображение рисуется или перерисовывается (а не только когда оно изначально рисуется).

Исправление на самом деле довольно просто:

Хранить логическое свойство (первоначально установлены в false) в data объекте вашего слоя изображения. Затем, в обратном load(), оберните свой код в оператор if который проверяет, является ли значение свойства false. Если это так, установите для него значение true и запустите код. Если нет, то вы знаете, что обратный вызов уже запущен, и поэтому вы ничего не делаете.

canvasObject.drawImage({
    layer: true,
    name: 'image',
    source: imageSize.url,
    x: (600-imageSize.width)/2,
    y: 0,
    fromCenter: false,
    data: {
        id : image.id,
        loaded: false
    },
    load: function(layer) {
        if (layer.data.loaded === false) {
            layer.data.loaded = true;
            // now draw the labels and stuff on top
            console.log("callback")
            for (var imageLabelIndex in image.image_label_locations) {
                var labelLocation = image.image_label_locations[imageLabelIndex]
                console.log("draw " + imageLabelIndex)

                drawLabelLine(canvasObject, {
                    index : imageLabelIndex,
                    from : {
                        x : labelLocation.location_x,
                        y : labelLocation.location_y
                    },
                    to : {
                        x : labelLocation.label.location_x,
                        y : labelLocation.label.location_y
                    }
                })
                drawSmallLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.location_x,
                    y : labelLocation.location_y,
                    id : labelLocation.id
                })
                drawLargeLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.label.location_x,
                    y : labelLocation.label.location_y,
                    id : labelLocation.label.id
                })
            }
        }
    },
    click: function(layer) {
        console.log("click")

        // check whether the mouse is on an existing object
        var canvasObject = $(layer.canvas)
        var parentOffset = canvasObject.offset();
        var canvasWidth = canvasObject.attr("width")
        var space = 24

        mouseDownPosition = {"x" : layer.eventX, "y" : layer.eventY }

        var labelPosition = { "x" : (mouseDownPosition.x < canvasWidth/2) ? space : canvasWidth-space, "y" : mouseDownPosition.y }
        drawLabelLine(canvasObject, {
            index : countAnswers(),
            from: {
                x : labelPosition.x,
                y : labelPosition.y
            },
            to: {
                x : mouseDownPosition.x,
                y : mouseDownPosition.y
            }
        })

        drawSmallLabel(canvasObject, {
            index : countAnswers(),
            x : mouseDownPosition.x,
            y : mouseDownPosition.y
        })

        drawLargeLabel(canvasObject, {
            index : countAnswers(),
            x : labelPosition.x,
            y : labelPosition.y
        })

        // also add an answer to the question page
        addLabelAnswer(countAnswers(), mouseDownPosition, labelPosition)
    }
})