14

I'm doing some graphing around a center X,Y of 0,0. When it's time to render, I reposition with translate, and then use scale to make the graph fill the canvas (ie scale everything by 50% for example).

I notice that it matters whether you call scale and then translate, or translate and then scale and I can't quite get my head around it. This is a problem since everything doesn't always fit, but my mental model isn't complete so having a hard time fixing it.

Can someone explain why the order of the scale and translate calls matter?

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
DougN
  • 4,407
  • 11
  • 56
  • 81

2 Answers2

23

So let's draw a grid on a 300x300 canvas:

http://jsfiddle.net/simonsarris/4uaZy/

enter image description here

This will do. Nothing special. A red line denotes where the origin is located by running through (0,0) and extending very very far, so when we translate it we'll see something. The origin here is the top left corner, where the red lines meet at (0,0).

All of the translations below happen before we draw the grid, so we'll be moving the grid. This lets you see exactly what's happening to the orgiin.

So lets translate the canvas by 100,100, moving it down+right:

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/1/

So we've translated the origin, which is where the red X is centered. The origin is now at 100,100.

Now we'll translate and then scale. Notice how the origin is in the same place as the last image, everything is just twice as large.

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/2/

Boom. The orgin is still at 100,100. Everything is puffed up by 2 though. The origin changed, then everything gets puffed up in place.

Now lets look at them in reverse. This time we scale first, so everything is fat from the start:

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/3/

Everything is puffed by 2. The origin is at 0,0, its starting point.

Now we do a scale and then a translate.

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/4/

We're translating by 100,100 still, but the origin has moved by 200,200 in real pixels. Compare this to two images previous.

This is because everything that happens after a scale must be scaled, including additional transforms. So transforming by (100,100) on a scaled canvas leads to it moving by 200, 200.

The takeaway thing to remember here is that changing the transformation affects how things are drawn (or transformed!) from then on. If you scale x2, and then translate, the translation will be x2

If you want to see, mathematically, what is happening at each step I encourage you to take a look at the code here:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

This mimics the entire transformation process done by canvas and lets you see how previous transforms modify those that come afterwards.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Excellent explanation. Seems so obvious now :) – DougN Jul 04 '12 at 19:01
  • Well, something still isn't making sense. Look at this one: http://jsfiddle.net/sdJ7v/1/ Trial and error helped me center the blue circle within the green. But given the coordinates, that offset doesn't make sense. Not sure how transform is being applied... – DougN Jul 04 '12 at 20:47
  • 1
    please see my comments here: http://jsfiddle.net/simonsarris/sdJ7v/2/ Does that make sense? – Simon Sarris Jul 04 '12 at 23:18
  • In other words, the transform permanently changed the origin, and the scale permanently applies to any new calculations, so `-25, -25` becomes `-50, -50` and since the origin is really at 200,200, it ends up being drawn at really 150, 150 – Simon Sarris Jul 04 '12 at 23:19
  • So canvas basically applies the transformations backwards. The "translate then scale" actually scales first then translates. The "scale then trasnalte" actually translates first then scales. – Calmarius Jun 29 '17 at 14:00
2

Scaling and rotation are done respect to the origin so if your transform has a translation, for example, then this will make the order important.

Heres a good read: Why Transformation Order Is Significant

zaf
  • 22,776
  • 12
  • 65
  • 95
  • Whoops, I said transform when I meant translate. Fixed. I read the article, but still don't get it. What does it mean that "scaling is done with respect to the origin"? Why does it matter if I scale everything by 50% where the origin is? – DougN Jul 04 '12 at 16:42
  • 1
    @DougN It matters because if things shrink or grow, they shrink or grow around a single point in the plane. If that point is centered on your canvas 50% scaling is like "unzoom". If it's at top-left then everything in the canvas will move 50% closer to that point. If it's out visible region, everything you're looking at may well move off-screen as it travels 50% closer to that point. To put it another way, only the origin pixel is purely scaled, while the rest shrink *and* translate relative to their starting position. – Peter Hansen Nov 16 '14 at 16:04