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.