Search within TutorialsPark

# HTML5 Canvas Transformation

## Canvas Translation :translate(x, y)

1.To translate the canvas co-ordinate system (i.e to shift the origin(0, 0) ) to a new point use translate method translate(x, y).

2.Here (x, y) : Denotes the new co-ordinates of the origin.

## Example: Canvas translate().

Give it a TRY! » Note-Anything on the canvas before the `translate()` method is not affected, but subsequent drawings will be translated.

## Canvas Scaling: scale(x_scale, y_scale).

1.The Canvas canvas co-ordinate system can be scaled using method scale(x_scale, y_scale) along both axis.

2.Here (x_scale, y_scale): Denotes the scaling factor by which the co-ordinate axis will be scaled.

Eg: x_scale = 3 means everything on canvas is displayed 3 times their actual width.

y_scale = 0.5 means everything on the canvas is displayed at half their actual height.

## Example: Canvas method scale().

Give it a TRY! » Note-Anything on the canvas before the `scale()` method is not affected, but subsequent drawings will be scaled.

## Canvas Rotation: rotate(angle).

1.The canvas co-ordinate axis can be rotated using method rotate(angle) .

2.Here parameter angle denotes the angle by which the co-ordinate axis is to be rotated.Expressed in Radians.

## Example: Canvas rotate().

Give it a TRY! » Note-Anything on the canvas before the `rotate()` method is not affected, but subsequent drawings will be rotated.

## Canvas Transformation Matrix: transform(a, b, c, d, e, f) .

1.The operations of translate(), scale() and rotate() can be performed at once using the method transform(a, b, c, d, e, f).

2.All objects on the canvas have an associated matrix for the present state. The present matrix of object is multiplied with the tranformation matrix to produce the overall effect.

3.The matrix has 9 numbers of which last row always remains [0 0 1].Other parameters are as follows:

a :To scale the object across X axis. b :To skew the object horizontally(i.e horizontal shear).

c :To skew the object vertically(i.e vertical shear).

d :To scale the object across Y axis.

e :To translate the object across X axis.

f :To translate the object across Y axis.

## Example: Canvas Matrix transform()

Give it a TRY! » Note-The matrix transform is multiplied to the current matrix, hence in fig last two square have different transforms.

## Canvas Transformation Matrix: setTransform(a, b, c, d, e, f) .

1.The operations of translate(), scale() and rotate() can be performed at once using the method setTransform(a, b, c, d, e, f).

2.All the values of parameters in the matrix are same as transform(a, b, c, d, e, f).

3.But the only difference is that the matrix is not multiplied to current state matrix, instead it overrides the current matrix to new transformation matrix.

## Example: Canvas Matrix setTransform()

Give it a TRY! » Note-The matrix transform is not multiplied but overrides the current matrix, hence in fig last two squares have the same transform.