title: Javascript function works the first time it is called but never the second time or any other time after that
body: <p>The code below is the code that I am working with where I'm trying to create a collision system that I plan to use in multiple projects.  But every time I try too create a second entity to test if the collision system works, it simply returns the following error.</p>
  
  <blockquote>
    <p>ncaught TypeError: entity is not a function
        <br>at enemy (game.html:103)
        <br>at updated (game.html:110)</p>
  </blockquote>
  
  <h3>Code Segment</h3>
  
  <pre><code>&lt;DOCTYPE html&gt;
  &lt;html&gt;
  &lt;canvas id="can" width="600" height="600" style="border:2px solid #000000"&gt;&lt;/canvas&gt;
  &lt;script language "JavaScript"&gt;
  var can = document.getElementById("can").getContext("2d");
  can.font = '20px Arial';
  
  var HEIGHT = 610;
  var WIDTH = 610;
  
  var startTime = Date.now();
  var frames = 0;
  var score = 0;
  
  
  var entitylist = [];
  var entity = function(id,type,x,y,xspd,yspd,width,height,color) {
      var self = {
      id:id,
      type:type,
      x:x,
      y:y,
      xspd:xspd,
      yspd:yspd,
      width:width,
      height:height,
      color:color
      };
  
      self.draw = function() {
          can.save();
          can.fillStyle = self.color;
          can.fillRect(self.x - self.width / 2,self.y - self.height / 2,self.width,self.height);
          can.restore();
      }
      self.position = function() {
          self.x = self.x + self.xspd;
          self.y = self.y + self.yspd
  
          if(self.x &lt;= self.width-10) {
              self.x = self.width;
              self.xspd = -self.xspd;
              self.x = self.x + self.xspd;
          }
          if(self.x &gt;= WIDTH - self.width) {
              self.x = WIDTH - self.width;
              self.xspd = -self.xspd;
              self.x = self.x + self.xspd;
          }
          if(self.y &lt;= self.height-10) {
              self.y = self.height;
              self.yspd = -self.yspd;
              self.y = self.y + self.yspd;
          }
          if(self.y &gt;= HEIGHT - self.height) {
              self.y = HEIGHT - self.height;
              self.yspd = -self.yspd;
              self.y = self.y + self.yspd;
          }
  
      }
      squareCollison = function(sqr1,sqr) {
          return sqr1.x &lt;= sqr.x + sqr.width
              &amp;&amp;sqr.x &lt;= sqr1.x + sqr1.width
              &amp;&amp;sqr1.y &lt;= sqr.y + sqr.height
              &amp;&amp;sqr.y &lt;= sqr1.y + sqr1.height;
      }
      collisonTest = function(sqr1,sqr) {
          var rect1 = {
          x:sqr1.x - sqr1.width / 2,
          y:sqr1.y - sqr1.height / 2,
          width:sqr1.width,
          height:sqr1.height
          }
          var rect2 = {
          x:sqr.x - sqr.width / 2,
          y:sqr.y - sqr.height / 2,
          width:sqr.width,
          height:sqr.height
          }
          return squareCollison(rect1,rect2);
      }
      self.update = function() {
          self.position();
          self.draw();
          console.log('entity update')
      }
      entity = self;
      entitylist[id] = self;
      return self;
  }
  
  enemy = function() {
      var id = Math.random();
      var type = 'enemy';
      var x = Math.random() * WIDTH;
      var y = Math.random() * HEIGHT;
      var xspd = 5 + Math.random() * 5;
      var yspd = 5 + Math.random() * 5;
      var width = 12 + Math.random()*10;  
      var height = 10 + Math.random()*10; 
      var color = 'red'
      entity(id,type,x,y,xspd,yspd,width,height,color);
  }
  
  updated = function() {
      can.clearRect(0,0,WIDTH,HEIGHT)
      frames++;
      if(frames % 50 === 0)
          enemy();
      for(E in entitylist){
          entitylist[E].update(entity);
          var collid = collisonTest(E,entitylist[E]);
          if(collid){
              console.log('colliding')
          }
      }
  }
  setInterval (updated,100);  
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>