title: Canvas Game Architecture: Access parent function in JavaScript Object
body: <p>I am trying to understand how can I create a custom game object in javascript.I am working on canvas and I thought that I can create a general game object that includes information about objects position,shape etc. and functions like "move", "fire", "display" etc. </p>
  
  <p>I created a function called "create(canvas)". That gets the canvas and initializes the local variables then calls the display function in "onload" function.
  But I can not access display function of an object.
  Additionally, I  always use "this" syntax to access my local variables or functions. It makes me feel that there is something going wrong.</p>
  
  <p>You can see the code below</p>
  
  <pre><code>&lt;script&gt;
  
  
      var gameObject = {
  
          x: 0,
          y: 0,
          velocity: 5,
          width: 40,
          height: 40,
          triggerObject:null,
          imgUrl: "/assets/minionframe/1.png",
          img:null,
          canvas:null,
          context:null,
          display:function(){
              this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  
              this.context.drawImage(this.img,this.x,this.y,this.width,this.height);
          },
          move: function (direction) {
              if (direction == "right")
                  x += this.velocity;
              else if (direction == "left")
                  x -= this.velocity;
              else if (direction == "up")
                  y -= this.velocity;
              else if (direction == "down")
                  y += this.velocity;
              this.display();
          },
          fire: function () {
  
          },
          create: function (canvas) {
              this.canvas = canvas;
              this.context = canvas.getContext('2d');
              img = new Image();
              img.src = this.imgUrl;
              img.onload = function () {
                  this.display()//i cant doing this :(
              }
              return this;
          }
      }
  
  &lt;/script&gt;
  &lt;canvas id="scene" width="800" height="600"&gt;&lt;/canvas&gt;
  &lt;script&gt;
  
      var scene = document.getElementById('scene');
      var obj = gameObject.create(scene);
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p>thanks a lot.</p>