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

There is no z axis in a canvas. What are you trying to accomplish? — recursive, Jul 30 '10 at 03:25
notice your are using `canvas.getContext('2d');` not '3d'. There is some talk about 3d but I don't think many or maybe any browsers support it. — qw3n, Jul 30 '10 at 03:40

score 6 · Answer 1 · answered Jul 30 '10 at 09:53

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.

thanks but, i know that there is a way with canvas.getContext('2d'); because i have seen it working and moving, its all javascript redrawing/edit the canvas every move you make.. — JamesM-SiteGen, Jul 31 '10 at 08:05
@JamesM if you've seen it working, then use that as your example. It's not like you can't download the code and look at it. — Rex M, Jul 31 '10 at 16:43

score 5 · Accepted Answer · answered Jul 30 '10 at 03:41

5

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

answered Jul 30 '10 at 03:41

harto

89,823
9
47
61

okay well, what code would i use to pan and go around the model with? – JamesM-SiteGen Jul 30 '10 at 04:56
I've had a look for frameworks to create 3d on a 2d canvas and there doesn't appear to be a huge amount out there. You could try taking a look at this guys work http://ajaxian.com/archives/canvas-in-3d – Castrohenge Jul 30 '10 at 08:33
Ah, yes, that is a great example.. Forgot all about that link.. ( I don't even think I've seen this comment until now ) – JamesM-SiteGen Jul 13 '11 at 08:59

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

2 Answers2