title: Javascript canvas collision side detection
body: <p>Hey i'm trying to get the side with which the two objects in the canvas collide. Here's what i'm using for collision detection, but it only checks for a collision, without a specific side.</p>
  
  <p>Where o1 and o2 are objects taht have properties:  </p>
  
  <p><code>x</code> - position on the X axis<br>
  <code>y</code> - position on the Y axis<br>
  <code>w</code> - the width of the rectangle<br>
  <code>h</code> - the height of the rectangle</p>
  
  <pre><code>var collidesWith = function (o2) {
      var o1 = this;
      if ((o1.y + o1.h) &lt; o2.y) {
          return 0;
      }
      if (o1.y &gt; (o2.y + o2.h)) {
          return 0;
      }
      if ((o1.x + o1.w) &lt; o2.x) {
          return 0;
      }
      if (o1.x &gt; (o2.x + o2.w)) {
          return 0;
      }
      return 1;
  };
  </code></pre>
  
  <p><strong>EDIT</strong>: Here's the code i came up for the collision detection on the top of the element:</p>
  
  <pre><code>if (
      (o1.y - o1.dy &gt;= o2.y) &amp;&amp;
      (o1.y - o1.dy &lt;= o2.y + o2.h) &amp;&amp;
      (o1.x + o1.w &gt;= o2.x) &amp;&amp;
      (o1.x &lt;= o2.x + o2.w)
  ) {
      // We have collision at the top end
  }
  </code></pre>