Using HTML5 canvas with the z axis? And how to move the canvas eye view?

Question

How do you use the z axis when drawing and moving a model?

I have the following in my code currently:

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()

I know 3d can be used in the 2d canvas, for example Pre3D library

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...

Answer 1

A canvas is a two-dimensional surface. You would need to project the pixels of your three-dimensional models onto the surface. See http://en.wikipedia.org/wiki/Graphical_projection

Answer 2

If you want to draw 3D onto the Canvas element, you'll need to use something called WebGL which is basically done by calling canvas.getContext('3d'); (instead of '2d'). This has limited support in browsers right now (Google Chrome supports it). Have a look at some WebGL Tutorials http://learningwebgl.com/blog/?cat=5

It is possible to do basic 3D graphics with a standard 2d Canvas context, have a look at Opera's Wolfenstein 3D Canvas tutorial http://dev.opera.com/articles/view/creating-pseudo-3d-games-with-html-5-can-1/

But what you're asking for isn't trivial, and requires basic understanding of 3D graphics projection. You're not going to get an answer that involves posting some blob of code that you can simply copy 'n' paste.