HTML5 Canvas Converting between cartesian and isometric coordinates
- by Amir
I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold:
(1) Scale down the y-axis by 0.5, i.e. ctx.scale(1,0.5); or ctx.setTransform(1,0,0,0.5,0,0); This supposedly produces the following matrix:
[x; y] x [1, 0; 0, 0.5]
(2) Rotate the context by 45 degrees, i.e. ctx.rotate(Math.PI/4); This should produce the following matrix:
[x; y] x [cos(45), -sin(45); sin(45), cos(45)]
This (somehow) results in the final matrix of ctx.setTransform(2,-1,1,0.5,0,0); which I cannot seem to understand... How is this matrix derived? I cannot seem to produce this matrix by multiplying the scaling and rotation matrices produced earlier...
Also, if I write out the equation for the final transformation matrix, I get:
newX = 2x + y
newY = -x + y/2
But this doesn't seem to be correct. For example, the following code draws an isometric tile at cartesian coordinates (500, 100).
ctx.setTransform(2,-1,1,0.5,0,0);
ctx.fillRect(500, 100, width*2, height);
When I check the result on the screen, the actual coordinates are (285, 215) which do not satisfy the equations I produced earlier... So what is going on here? I would be very grateful if you could:
(1) Help me understand how the final isometric transformation matrix is derived;
(2) Help me produce the correct equation for finding the on-screen coordinates of an isometric projection.
Many thanks and kind regards
