Using HTML5 canvas with the z axis? And how to move the canvas eye view? {Please Help me I have a deadline that ends very soon}

Question

Hey all how do you use the z axis when drawing and moving a model?

I have the following:

canvas = (function () {
    canvas = {
        canvas: $("canvas"),
        models: [{
            start: [10, 10, 10],
            end: [1, 10, 10],
            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 () {
            this.data.canvas = this.canvas[0];
            if (this.data.canvas.getContext) {
                this.data.ctx = this.data.canvas.getContext('2d');
                $.each(this.models, (function () {
                    canvas.data.ctx.fillStyle = this.color;
                    canvas.data.ctx.fillRect(this["start"][0], this["start"][1], this["end"][0], this["end"][1]);
                }));
            }
        })
    };
    canvas.draw();
    return canvas;
})();

Thanks in advanced..

I know 3d can be used in the 2d canvas, here is just one for you guys: http://deanm.github.com/pre3d/

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.S: Smaller code is faster to load and read..

{Please Help me I have a deadline that ends very soon}

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.