I'm currently building some kind of fake-3D dungeon, and I'm facing some difficulties understanding the behavior of the setTransform() function.
Here's my simplified code:
var can = document.getElementById('c'),
ctx = can.getContext('2d'),
angle = Math.PI / 4;
ctx.fillStyle = "grey";
ctx.setTransform(1, Math.tan(angle), 0, 1, 0, 0);
ctx.fillRect(100, 0, 50, 50);
Here's also s JsBin with the same code for you to see the result: http://jsbin.com/oxaSIpe/7/edit
Changing the x coordinate in the fillRect
seems to also affect the y coordinate.
It makes no sense. Skewing an element changes its position? No documentation mentions anything like that.
If anyone could please try to explain this function and its weird behavior, I would be very grateful.