Rotating Canvas About Axis Problems

I am using canvas 3d to draw a 3d graph in which i can plot points such as (1,5,4), (-8,6,-2) etc.So i am able to draw in all positive and negative x,y and z axis.I also have rotat

Solution 1:

The final output of rotations along multiple axis can vary depending on the order that you rotate the axis'. What you need to do is keep track of the total rotation along each axis (as three numbers, not using matrices). And each time you update a rotation value, apply all three total rotations to an identity matrix in the correct order (try x,y,z). Always use the same order. Then use this to transform your coordinates.

Solution 2:

here is my opinion:

JAVASCRIPT

var canvas = document.getElementById("myCanvas");
var ctx2 = canvas.getContext("2d");
ctx2.fillStyle='#333';

ctx2.fillRect(50,50,100,100);
var ctx = canvas.getContext("2d");


ctx.fillStyle='red';

var deg = Math.PI/180;

ctx.save();
    ctx.translate(100, 100);
    ctx.rotate(45 * deg);
    ctx.fillRect(-50,-50,100,100);
ctx.restore();

ctx2 is the old position and ctx is the new position of the shape. You have to translate the shape with the same x,y coordinates according to where you want position your shape. Then you have to enter values to ctx.fillRect(x,y,w,h);keep x and y as the -ve values (half of height and width to keep it on the diagonal to the canvas otherwise change to manipulate it). and h, w as your desired values.

DEMO