Firebug reference error that one of my functions is not defined when it's called from the KineticJS library

Question

I'm using the KineticJS library to draw some images to the canvas, and make them draggable. I've downloaded a copy of the library, so that I can make one or two slight adjustments to it, in order to use it with the canvas game I'm making.

The function within the KineticJS library that I've altered is the

drawHit: function(){}

Originally, the function looked like this:

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

But I've added in a couple of calls to functions that I've written:

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

The reason I've done this, is because beforehand, when dragging and dropping an image around the canvas, the canvas would be completely cleared when a click was detected, and only the images would be redrawn- I had a few other things displayed on the canvas that I wanted to remain there each time the canvas was redrawn when moving an image around. (These things were drawn by the two function calls I've added to this function)

However, when I view my page in a browser now, I'm getting the Firebug console error:

ReferenceError: drawDescriptionBoxes is not defined

drawDescriptionBoxes(imageObj);

on the line

drawDescriptionBoxes(imageObj);

(where I've added it to the function)

The function 'drawDescriptionBoxes' is defined in a file called 'drawdescriptionboxes.js' and has the following code:

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
    });

}

I am calling this function from the

window.onload = function(){} 

in my index.html page with the line

drawdescriptionboxes();

I have another couple of functions also being called here in exactly the same way, and there is no problem with them.

Anyone have any ideas why I'm getting this reference error?

Edit

I'm also getting a syntax error: missing } after property list on line 30 of 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);

}

Line 30 is the line:

draggable: false

in

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

so I don't know if this is what would be causing the other error?

Answer 1

using developer tools in Chrome or firebug in firefox (F12) set a break point in your script and follow the function calls step by step and make sure your library is included and called (function is defined) before you call it.

You should try copy/paste your function definition drawdescriptionboxes just before calling it first time, once it works fine, you should place it in a place where the function definition gets called before the function call.