title: JS console error- object not defined
body: <p>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:</p>
  
  <pre><code>function isHit(mouseX, mouseY){
  if(draggingImage == true){
      console.log("if dragging image == true statment is being called");
      if(mouseY &gt; 420){
          if((mouseX &gt; 80) &amp;&amp; (mouseX &lt; 200) &amp;&amp; (obj.shape.index &gt;= 0) &amp;&amp; (obj.shape.index &lt;= numImagesAssets)){
              console.log("Correct");
          }else{
              console.log("Incorrect");
          }
      }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>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.</p>
  
  <p>At the moment, my <code>if</code> statement is just checking to see whether the image currently being dragged belongs in the first of four description boxes.</p>
  
  <p>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 <code>mouseY</code> variable (y position of the cursor on the canvas) is greater than 420- since 420 is the top 'boundary' of the description box images.</p>
  
  <p>Then, if the <code>draggingImage</code> variable is true, and the cursor's <code>mouseY</code> 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.</p>
  
  <p>If it is, the function should then check whether the value of <code>obj.shape.index</code> is greater than or equal to 0 and less than the value of <code>numImagesAssets</code>. If it is, the console should log "correct", and if not, it should log "incorrect".</p>
  
  <p>The variable <code>obj.shape.index</code> 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.</p>
  
  <p>In this example, the value of the variable <code>numImagesAssets</code> is 10 (as displayed in the console by a <code>console.log</code> line in my code)</p>
  
  <p>In my <code>mousedown</code> function, I have the line:</p>
  
  <pre><code>console.log("value of variable obj:" + output + ". Shape is " + obj.shape + ". index is " + obj.shape.index);
  </code></pre>
  
  <p>and when I click on an image on my canvas, this console.log line displays the value of the variable property <code>obj.shape.index</code>, for example, I just clicked on one of the draggable images on the canvas, and this line printed the following output to the console:</p>
  
  <pre><code>value of variable obj:shape: [object Object]; pixel: [object Uint8ClampedArray]; . Shape is [object Object]. index is 8
  </code></pre>
  
  <p>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).</p>
  
  <p>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:</p>
  
  <pre><code>if((mouseX &gt; 80) &amp;&amp; (mouseX &lt; 200) &amp;&amp; (obj.shape.index &gt;= 0) &amp;&amp; (obj.shape.index &lt;= numImagesAssets)){
  </code></pre>
  
  <p>But, strangely, if I drag an image to one of the description boxes it doesn't belong to, the <code>else</code> clause in my <code>if</code> statment is triggered correctly, and the word "Incorrect" is printed to the console....</p>
  
  <p>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 <code>if</code> statement.</p>
  
  <p>Anyone have any ideas?</p>
  
  <p><strong>Edit 19/03/2013 @ 12:00</strong></p>
  
  <p>Ok, I've edited my <code>isHit</code> function a little, to add another <code>console.log</code> line which will show the value of <code>obj.shape.index</code> within my <code>isHit</code> function. The function now looks like this:</p>
  
  <pre><code>function isHit(mouseX, mouseY, obj){
  if(draggingImage == true){
      console.log("if dragging image == true statment is being called");
      if(mouseY &gt; 420){
          console.log("Value of obj.shape.index = " +obj.shape.index);
          if((mouseX &gt; 80) &amp;&amp; (mouseX &lt; 200) &amp;&amp; (obj.shape.index &gt;= 0) &amp;&amp; (obj.shape.index &lt;= numImagesAssets)){
              console.log("Correct");
          }else{
              console.log("Incorrect");
          }
      }
  }
  }
  </code></pre>
  
  <p>I have the following console log line just before the call to <code>isHit</code>:</p>
  
  <pre><code>console.log("obj.shape.index = " + obj.shape.index);
  </code></pre>
  
  <p>This line displays that the value of <code>obj.shape.index</code> 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 <code>obj.shape.index</code> 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:</p>
  
  <pre><code>if dragging image == true statment is being called
  </code></pre>
  
  <p>showing that the <code>isHit</code> function is being called, and the next thing printed to the console is the line:</p>
  
  <pre><code>Value of obj.shape.index = 34
  </code></pre>
  
  <p>Any idea why the value of <code>obj.shape.index</code> 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...</p>