title: HTML5 Canvas: collision detection issues
body: <p>I have this script I am working on that utilizes the oCanvas JS Library (<a href="http://ocanvas.org/" rel="nofollow noreferrer">http://ocanvas.org/</a>) that creates an HTML5 canvas and displays multiple objects within the canvas. Currently, I have the script reading from an external XML document and loops through each project node and creates a circle object on the canvas.</p>
  
  <p>I am having issues with trying to place this objects on the canvas evenly spaced from the middle circle (the logo variable in the code below).</p>
  
  <pre><code>// GLOBALS
      var xmlData = '&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;root name="CompanyName"&gt;&lt;projects&gt;&lt;project name="Project1"&gt;&lt;/project&gt;&lt;project name="Project2"&gt;&lt;/project&gt;&lt;/projects&gt;&lt;/root&gt;'
  
      var xmlObj = []
      // var angle = (360 * Math.PI)/180
      var padding = 15
      var canvas = oCanvas.create({
          canvas: '#myCanvas'
      })
      var c_width = canvas.width
      var c_height = canvas.height
  
      var logo = canvas.display.ellipse({
          x: c_width / 2,
          y: c_height / 3,
          radius: 80,
          fill: '#d15851'
      })
  
      canvas.addChild(logo)
  
      // var getXML = function(file){
      //  $.ajax({
      //      url: file,
      //      type: 'GET',
      //      dataType: 'xml',
      //      async: false,
      //      success: parseXML
      //  })
      // }
  
      var parseXML = function() {
          var xmlDoc = $.parseXML(xmlData)
          var xml = $(xmlDoc)
  
          xml.find('project').each(function(i){
              xmlObj[i] = canvas.display.ellipse({
                  fill: '#'+'0123456789abcdef'.split('').map(function(v,i,a){
                    return i&gt;5 ? null : a[Math.floor(Math.random()*16)] }).join(''),
                  radius: 40,
                  opacity: 1
              })
          });
  
          var angleSingleton = {
              "currentAngle": 0,
              "currentOffset": 0,
              "incrementAngle": function() {
                  this.currentAngle = this.currentAngle + this.currentOffset
              }
          }
  
          angleSingleton.currentOffset = Math.floor((360 * Math.PI)/xmlObj.length);
  
          for(h = 0; h &lt; xmlObj.length; h++) {
              xmlObj[h].x = (logo.x + logo.radius * Math.cos(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;
              xmlObj[h].y = (logo.y + logo.radius * Math.sin(angleSingleton.currentAngle)) + xmlObj[h].radius + padding;
  
              canvas.addChild(xmlObj[h])
              angleSingleton.incrementAngle()
          }
      }
  
  //
  
  $(document).ready(function(){
      parseXML()
  })
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/YDNw2.png" alt="enter image description here"></p>