Transformations E-mail
Canvas element
Canvas context
Transformations
Compositing
Colours
Context styles
Gradients
Patterns
Line styles
Shadows
Simple shapes
Paths
Text
Images
Pixel manipulation
Example: Webtris

context.scale (x, y);

  • Changes the transformation matrix, scaling it along the x and y.
  • x and y are specified as floating point numbers, using the formula value = scale percentage / 100.

context.rotate (angle);

  • Changes the transformation matrix, rotating it by angle.
  • angle is specified in radians, using the formula radians = degrees * Pi / 180.

context.translate (x, y);

  • Changes the transformation matrix, moving it by x and y.

context.transform (m11, m12, m21, m22, dx, dy);

  • Changes the transformation matrix by the two dimensional matrix identified by m11, m12, m21 & m22.
  • dx and dy are used to change the translation.

context.setTransform (m11, m12, m21, m22, dx, dy);

  • Sets the transformation matrix to the two dimensional matrix identified by m11, m12, m21 & m22.
  • dx and dy are used to set the translation.
  • The identity matrix can be applied by passing the parameters (1, 0, 0, 1, 0, 0)

Unfortunately, your browser does not support modern web standards.
Please use one of the supported browsers listed below, they're free to download and use.

Supported browsers: Firefox, Safari, Chrome, Opera, and Konqueror.


Source (click to expand)

var cnv = document.getElementById('canvas');
var ctx = cnv.getContext('2d');
ctx.width = ctx.width; // Clear the context

// Draw a rectangle at the origin, which is coordinates (0, 0). The 
// rectangle will actually be positioned and oriented by the translate 
// & rotate methods. In order the have the rotation applied around the 
// shape center, the translation must be performed before the rotation.
function drawRect(c) {
  ctx.save();

  // Pen and fill styles
  ctx.fillStyle = c;
  ctx.lineWidth = 2;
  ctx.strokeStyle = "#000000";

  // Draw the shape, positioning the four corners so that the origin
  // at (0, 0) is in the centre of the shape, so that any rotations
  // that are applied, rotate it around it's center.
  ctx.beginPath();
  ctx.rect(-50, -25, 100, 50);
  ctx.closePath();

  // Fill, then outline the shape in black
  ctx.fill();
  ctx.stroke();

  ctx.restore();
}

// Red is not rotated
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.translate(30 + 50, 40 + 25);
drawRect("#FF0000");

// Blue is rotated 45 degrees
ctx.setTransform(1, 0, 0, 1, 0,	0);
ctx.translate(160 + 30 + 50, 40 + 25);
ctx.rotate(45 * Math.PI / 180);
drawRect("#0000FF");

// Green is scaled up by 25%
ctx.setTransform(1, 0, 0, 1, 0,	0);
ctx.translate(30 + 50, 140 + 25);
ctx.scale(1.25, 1.25);
drawRect("#00FF00");

// Cyan is scaled up by 25% & rotated by 30 degrees
ctx.setTransform(1, 0, 0, 1, 0,	0);
ctx.translate(160 + 30 + 50, 140 + 25);
ctx.scale(1.25, 1.25);
ctx.rotate(30 * Math.PI / 180);
drawRect("#00FFFF");

// Transformations can be pre-calculated and manually applied, so
// that scaling, translation & rotation can be bundled up into one 
// call using transform() or setTransform().
var m11, m12, m21, m22, dx, dy;

// Calculate a rotation of -25 degrees
var rad = -25 * Math.PI / 180;
m11 = Math.cos(rad);
m12 = Math.sin(rad);
m21 = -Math.sin(rad);
m22 = Math.cos(rad);

// Scale the shape by 150%
m11 *= 1.5;
m12 *= 1.5;
m21 *= 1.5;
m22 *= 1.5;

// Position the shape in the center of the window
dx = 160;
dy = 300;

// Perform the transformation and draw a yellow rectangle
ctx.setTransform(m11, m12, m21, m22, dx, dy);
drawRect("#FFFF00");