title: Object Oriented JavaScript for Canvas
body: <p>I have this sort of mini framework (Scene, Actor) to build upon that I got from this JS book in building a game. I will display the code here and ask the question after:</p>
  
  <pre><code>//-------------------------------SCENE CLASS------------------------------//
  
  function Scene(context, width, height, images)
  {
      this.context = context;
      this.width = width;
      this.height = height;
      this.images = images;
      this.actors = [];
  }
  
  Scene.prototype.register = function(actor)
  {
      this.actors.push(actor);
  }
  
  Scene.prototype.unregister = function(actor)
  {
      var index = this.actors.indexOf(actor);
      if(index &gt;= 0)
      {
          this.actors.splice(index,1);
      }
  }
  
  Scene.prototype.draw = function()
  {
      this.context.clearRect(0, 0, this.width, this.height);
      for(var i = 0;i &lt; this.actors.length; i++)
      {
          this.actors[i].draw();
      }
  }
  
  //-------------------------------ACTOR CLASS-------------------------------//
  
  function Actor(scene, x, y)
  {
      this.scene = scene;
      this.x = x;
      this.y = y;
      scene.register(this);
  }
  
  Actor.prototype.moveTo = function(x, y)
  {
      this.x = x;
      this.y = y;
      this.scene.draw();
  }
  
  Actor.prototype.exit = function()
  {
      this.scene.unregister(this);
      this.scene.draw();
  }
  
  Actor.prototype.draw = function()
  {
      var image = this.scene.images[this.type]; // how does this work???
      this.scene.context.drawImage(image, this.x, this.y);
  }
  
  Actor.prototype.width = function()
  {
      return this.scene.images[this.type].width;
  }
  
  Actor.prototype.height = function()
  {
      return this.scene.images[this.type].height;
  }
  
  //-----------------------------SPACESHIP CLASS------------------------------//
  
  function Spaceship(scene, x, y)
  {
      Actor.call(this, scene, x, y);
  }
  
  Spaceship.prototype = Object.create(Actor.prototype);
  
  Spaceship.prototype.left = function()
  {
      this.moveTo(Math.max(this.x - 10, 0), this.y);
  }
  
  Spaceship.prototype.right = function()
  {
      var maxWidth = this.scene.width - this.width();
      this.moveTo(Math.min(this.x + 10, maxWidth), this.y);
  }
  
  Spaceship.prototype.type = "Spaceship";
  </code></pre>
  
  <p>My question is, how do you go about plugging in images into the Scene constructor for this spaceship example or for any other actor object that may come up? It said very vaguely in the book to create a 'data table' but I am not sure how to go about it. If I wanted to utilize this class I suppose I would have to do something like this:</p>
  
  <pre><code>var scene = new Scene(ctx,800,600, //not sure here)
  var spaceship = new Spaceship(scene,10,10);
  scene.draw();
  </code></pre>
  
  <p>Thank you! :)</p>