Ошибка ссылки Firebug на то, что одна из моих функций не определена при вызове из библиотеки KineticJS.

Я использую библиотеку KineticJS, чтобы рисовать изображения на холсте и делать их перетаскиваемыми. Я скачал копию библиотеки, чтобы внести в нее одну или две небольшие корректировки, чтобы использовать ее с игрой на холсте, которую я делаю.

Функция в библиотеке KineticJS, которую я изменил, — это

drawHit: function(){}

Изначально функция выглядела так:

drawHit: function() {
    this.hitCanvas.clear();
    Kinetic.Container.prototype.drawHit.call(this);
},

Но я добавил пару вызовов функций, которые я написал:

drawHit: function() {
    this.hitCanvas.clear();
    drawGameElements();
    drawDescriptionBoxes(imageObj);
    Kinetic.Container.prototype.drawHit.call(this);
},

Причина, по которой я это сделал, заключается в том, что заранее, при перетаскивании изображения по холсту, холст полностью очищался при обнаружении щелчка, и перерисовывались только изображения. У меня было несколько других вещей, отображаемых на холст, который я хотел оставаться там каждый раз, когда холст перерисовывался при перемещении изображения. (Эти вещи были нарисованы двумя вызовами функций, которые я добавил к этой функции)

Однако, когда я сейчас просматриваю свою страницу в браузере, я получаю сообщение об ошибке консоли Firebug:

ReferenceError: drawDescriptionBoxes is not defined

drawDescriptionBoxes(imageObj);

на линии

drawDescriptionBoxes(imageObj);

(где я добавил его в функцию)

Функция drawDescriptionBoxes определена в файле drawdescriptionboxes.js и имеет следующий код:

function drawDescriptionBoxes(imageObj){
/*  CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
        if(typeof stroke == "undefined" ){
            stroke = true;
        }
        if(typeof radius === "undefined"){
            radius = 5;
        }
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();
        if(stroke){
            context.stroke();
        }
    } */
    var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

    var liabilitiesDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 300,
        y: 400
        draggable: false
    });

    var incomeDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 540,
        y: 400
        draggable: false
    });

    var expenditureDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 750,
        y: 400
        draggable: false
    });

}

Я вызываю эту функцию из

window.onload = function(){} 

на моей странице index.html со строкой

drawdescriptionboxes();

У меня точно так же вызывается еще пара функций, и с ними проблем нет.

У кого-нибудь есть идеи, почему я получаю эту справочную ошибку?

Изменить

Я также получаю синтаксическую ошибку: отсутствует } после списка свойств в строке 30 drawDescriptionBoxes.js:

function drawDescriptionBoxes(imageObj){
/*  CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){
        if(typeof stroke == "undefined" ){
            stroke = true;
        }
        if(typeof radius === "undefined"){
            radius = 5;
        }
        this.beginPath();
        this.moveTo(x + radius, y);
        this.lineTo(x + width - radius, y);
        this.quadraticCurveTo(x + width, y, x + width, y + radius);
        this.lineTo(x + width, y + height - radius);
        this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
        this.lineTo(x + radius, y + height);
        this.quadraticCurveTo(x, y + height, x, y + height - radius);
        this.lineTo(x, y + radius);
        this.quadraticCurveTo(x, y, x + radius, y);
        this.closePath();
        if(stroke){
            context.stroke();
        }
    } */
    var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

    var liabilitiesDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 300,
        y: 400
        draggable: false
    });

    var incomeDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 540,
        y: 400
        draggable: false
    });

    var expenditureDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 750,
        y: 400
        draggable: false
    });

    context.drawImage(sources[34], 70, 400, 120, 70);
    context.drawImage(sources[35], 300, 400, 120, 70);
    context.drawImage(sources[36], 540, 400, 120, 70);
    context.drawImage(sources[37], 750, 400, 120, 70);

}

Строка 30 - это строка:

draggable: false

in

var assetsDescriptionBoxImage = new Kinetic.Image({
        image: imageObj,
        width: 120,
        height: 70,
        x: 70,
        y: 400
        draggable: false
    });

поэтому я не знаю, является ли это причиной другой ошибки?