title: Using HTML5 canvas with the z axis? And how to move the canvas eye view?
body: <p>How do you use the z axis when drawing and moving a model?</p>
  
  <p>I have the following in my code currently:</p>
  
  <pre><code>var canvas = {
      obj: document.querySelector("canvas"),
      models: [{
          start: [10, 10, 10],
          end: [1, 20, 20],
          color: "silver",
      },{ start: [30, 30, 30],
          end: [10, 1, 10],
          color: "silver",
      },{ start: [60, 60, 60],
          end: [10, 10, 10],
          color: "silver",
      }],
      data: {},
      draw: (function () {
          if (this.obj.getContext) {
              this.data.ctx = this.obj.getContext('2d');
              this.models.forEach(function () {
                  canvas.data.ctx.fillStyle = this.color;
                  canvas.data.ctx.fillRect(this["start"][0], this["start"][1], this["end"][0], this["end"][1]);
              }));
          }
          return this
      })
  }.draw()
  </code></pre>
  
  <p>I know 3d can be used in the 2d canvas, for example <a href="http://deanm.github.com/pre3d/" rel="nofollow noreferrer">Pre3D library</a></p>
  
  <p>So what I am trying to do is have a model of a shop item and be able to pan and look around it in 3d... I still don't know how to move everything but for now I am asking for how to get the z axis there... Then I will ask for how to move the canvas...</p>