JS console error- object not defined - html5-canvas

Question

I have the following JS function, which I'm using to detect whether a 'draggable' image on my HTML5 canvas is dragged on top of a static 'description box' image, also displayed on the canvas:
function isHit(mouseX, mouseY){
if(draggingImage == true){
console.log("if dragging image == true statment is being called");
if(mouseY > 420){
if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
console.log("Correct");
}else{
console.log("Incorrect");
}
}
}
}
The idea is that there will be a number of static images on the canvas (which will be the description boxes), and a greater number of draggable images. The user will be required to drag each of the draggable images to the relevant description box.
At the moment, my if statement is just checking to see whether the image currently being dragged belongs in the first of four description boxes.
Since the description boxes are all displayed in a row towards the bottom of the canvas, I've set my function to only check for a collision when the mouseY variable (y position of the cursor on the canvas) is greater than 420- since 420 is the top 'boundary' of the description box images.
Then, if the draggingImage variable is true, and the cursor's mouseY value is greater than 420, I want to start checking whether the cursor hovers over any of the description boxes. The first one is displayed between the X positions 80 and 200, so I'm checking if mouseX is greater than 80 and less than 200.
If it is, the function should then check whether the value of obj.shape.index is greater than or equal to 0 and less than the value of numImagesAssets. If it is, the console should log "correct", and if not, it should log "incorrect".
The variable obj.shape.index gets the position of the image that has been clicked in my array of images (this array contains all of the draggable images displayed on the canvas). If value of that is between a certain range, then I know that the image belongs to the first description box, if it's between another range, it belongs to the next description box, etc.
In this example, the value of the variable numImagesAssets is 10 (as displayed in the console by a console.log line in my code)
In my mousedown function, I have the line:
console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index);
and when I click on an image on my canvas, this console.log line displays the value of the variable property obj.shape.index, for example, I just clicked on one of the draggable images on the canvas, and this line printed the following output to the console:
value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8
So I know that the image I clicked that time was at position 8 in my images array (I've checked this manually several times, clicking a different image each time, and it was always displaying the correct position).
Now, the problem I'm having, is that when I actually go and drag an image over its correct description box, I get a console error that says "obj is not defined", and it's complaining about the line:
if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
But, strangely, if I drag an image to one of the description boxes it doesn't belong to, the else clause in my if statment is triggered correctly, and the word "Incorrect" is printed to the console....
I can't figure out why it's not working when I drag an image to the correct description box, or why it says that "obj" is not defined in that case, but then is happy to use "obj" for the 'else' clause in the if statement.
Anyone have any ideas?
Edit 19/03/2013 # 12:00
Ok, I've edited my isHit function a little, to add another console.log line which will show the value of obj.shape.index within my isHit function. The function now looks like this:
function isHit(mouseX, mouseY, obj){
if(draggingImage == true){
console.log("if dragging image == true statment is being called");
if(mouseY > 420){
console.log("Value of obj.shape.index = " +obj.shape.index);
if((mouseX > 80) && (mouseX < 200) && (obj.shape.index >= 0) && (obj.shape.index <= numImagesAssets)){
console.log("Correct");
}else{
console.log("Incorrect");
}
}
}
}
I have the following console log line just before the call to isHit:
console.log("obj.shape.index = " + obj.shape.index);
This line displays that the value of obj.shape.index is 0 when I first click on the image (which is correct- it is the first image in my array of images), however, as I then drag the image around the canvas, the value of obj.shape.index seem to increase randomly... at one point the console was displaying that it was 23, then that it was 25, and then when I finally drag it to its description box, the console logs the line:
if dragging image == true statment is being called
showing that the isHit function is being called, and the next thing printed to the console is the line:
Value of obj.shape.index = 34
Any idea why the value of obj.shape.index keeps increasing? Is it not actually the position of the element within the array? I'm sure it is though, because when I click on one of the other images, it displays the value of their position within the array, so I don't understand why the value keeps increasing as I move the image around the canvas... it's position within the array isn't being altered at all...

Answer 1

If obj.shape.index is valid before entering isHit(), you probably have a scoping issue.
Try this -- supply obj to isHit:
// call isHit and also supply obj
console.log("obj = "+obj); // Test obj for validity just before calling isHit
var isItHit = isHit(mouseX, mouseY, obj); // Then call isHit WITH obj
// and modify isHit to accept the obj
function isHit(mouseX,mouseY,obj) { ...