JavaScript draw using mouse Canvas with 3 axis

Viewed 1427

How is it / is it possible to draw using the mouse a canvas using 3 axis(x,y,z).

I know that one can draw a canvas on 2 axis and I have done that successfully.

But I have no idea of how I shall draw it on 3 axis (for example a cube).

Following shows some 2d canvas drawing functionallity

$(canvas).on('mousemove', function(e) {
mousex = parseInt(e.clientX-canvasx);
mousey = parseInt(e.clientY-canvasy);
if(mousedown) {
    ctx.beginPath();
    if(tooltype=='draw') {
        ctx.globalCompositeOperation = 'source-over';
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 3;
    } else {
        ctx.globalCompositeOperation = 'destination-out';
        ctx.lineWidth = 10;
    }
    ctx.moveTo(last_mousex,last_mousey);
    ctx.lineTo(mousex,mousey);
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.stroke();
}
last_mousex = mousex;
last_mousey = mousey;
//Output
$('#output').html('current: '+mousex+', '+mousey+'<br/>last: '+last_mousex+', '+last_mousey+'<br/>mousedown: '+mousedown);

});

The full code https://jsfiddle.net/ArtBIT/kneDX/.

But how can I add a z axis and draw a 3d canvas for instance a cube.

2 Answers
Related