What is canvas translate? why should we use it?

The translate() method remaps the (0,0) position on the canvas.

Note: When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values.


JavaScript syntax: context.translate(x,y);

Parameter Values

Note: You can specify one or both parameters.

Parameter Description
x The value to add to horizontal (x) coordinates
y The value to add to vertical (y) coordinates

In Simple words, Translate – Basically do what it says. Just translate the canvas using x,y. If you want to draw two objects and the one is just translation of the other e.g x2 = x1 + 50 for each point . You don’t have to make all your calculations again for the second object but you can just translate the canvas and draw again the same object.

Example: So let’s draw a grid on a 300×300 canvas:


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:



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.


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:


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

Now we do a scale and then a translate.


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:

Reference: http://stackoverflow.com/questions/11332608/understanding-html-5-canvas-scale-and-translate-order


Still have confusion?? Not clear??

A single Matrix object can store a single transformation or a sequence of transformations. The latter is called acomposite  transformation. The matrix of a composite transformation is obtained by multiplying the matrices of the individual transformations.

In a composite transformation, the order of the individual transformations is important. For example, if you first rotate, then scale, then translate, you get a different result than if you first translate, then rotate, then scale. In Windows GDI+, composite transformations are built from left to right. If S, R, and T are scale, rotation, and translation matrices respectively, then the product SRT (in that order) is the matrix of the composite transformation that first scales, then rotates, then translates. The matrix produced by the product SRT is different from the matrix produced by the product TRS.

One reason order is significant is that transformations like rotation and scaling are done with respect to the origin of the coordinate system. Scaling an object that is centered at the origin produces a different result than scaling an object that has been moved away from the origin. Similarly, rotating an object that is centered at the origin produces a different result than rotating an object that has been moved away from the origin.

The following example combines scaling, rotation and translation (in that order) to form a composite transformation.

Reference: http://msdn.microsoft.com/en-us/library/windows/desktop/ms533864%28v=vs.85%29.aspx


Doubt on scaling?? check this

One thought on “What is canvas translate? why should we use it?

  1. Pingback: Canvas Transform | Sathya's Log

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s