Canvas setTransform function clarification

Question

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.

Answer 1

setTrasnform(a, b, c, d, e, f) has six parameters:

• a Scales the drawings horizontally
• b Skew the the drawings horizontally
• c Skew the the drawings vertically
• d Scales the drawings vertically
• e Moves the the drawings horizontally
• f Moves the the drawings vertically

It scales and skews the whole canvas. Imagine you are drawing on the canvas that is not skewed. It is skewed (transformed) only just before it is printed to the screen. See the following diagram:

The whole canvas is skewed. I added four squares to the red rectangle. The skew causes the Y shift.

Here's the code:

var game = function() {
    var can = document.getElementById('c'),
        ctx = can.getContext('2d');

    ctx.fillStyle = "red";
    ctx.setTransform(1, 0.2, 0, 1, 0, 0);
    ctx.fillRect(20, 20, 250, 150);

    ctx.fillStyle = "blue";
    ctx.fillRect(30, 30, 20, 20);
    ctx.fillRect(60, 30, 20, 20);
    ctx.fillRect(90, 30, 20, 20);
    ctx.fillRect(120, 30, 20, 20);
};

game();

---

Philipp's answer is correct and it does answer your question. But maybe it's hard for you to digest. Use my example and add more small squares with different transforms to get a better idea of the setTransform.

Answer 2

The context.setTransform function (as well as all the convenience projection-functions like scale or rotate) works by changing the coordinate-system of the canvas. So yes, changing the transformation to a skewed projection changes the position of everything you draw. It doesn't just affect how you draw, it also affects where you draw.

Answer 3

Set transform sets the whole transform at once, which means if you want to specify where the rectangle ends up in screen coordinates, then you need to modify the translation component to compensate for the scale and skewing. In some sense, these are applied "first," which is just the convention used by most drawing APIs. Or you could just do:

ctx.translate(23,40);
ctx.transform(1, 1/2, 0, 1, 0, 0);

ctx.fillRect(0, 0, 50, 50);
ctx.rect(-10,-10,20,20);
ctx.stroke();

http://jsbin.com/oxaSIpe/11/edit

Now the translate part controls where the top left corner of the square goes, with an extra box to show where the origin is of this new space. You can modify the translate line to put it anywhere in screen space.

Note that most isometric games use 2-1 slope for the lines, or about 26.5 degrees, which I have done here. "True" isometric is 30 degrees, not 45.