HTML and CSS Reference

In-Depth Information

The
translate(
x
,
y
)
function is a handy function to use to change the origin from

(0,0) to another location in the drawing. The following example moves the origin to

(100,100). Then, when the start coordinates of the rectangle are specified at (0,0), it really

starts at (100,100).

context.translate(100,100);

context.fillRect(0,0,100,100);

A simple example of moving some boxes around is shown here:

O
NLINE
http://htmlref.com/ch2/canvastranslate.html

All the methods presented so far are conveniences to help us use an underlying

transform matrix associated with paths. All paths have an identity matrix as their default

transform. As an identity, this transform matrix does nothing, but it is certainly possible to

adjust this matrix in a few ways. First, it can be directly modified by calling
setTransform

(m11,m12,m21,m22,dx,dy)
, which resets the matrix to the identity matrix and then

calls
transform()
with the given parameters. Or you can do this directly by using

transform(m11,m12,m21,m22,dx,dy)
, which multiplies whatever the current matrix is

with the matrix defined by

m11 m21 dx

m12 m22 dy

0 0 1

The problem with the method should be obvious: unless you understand more than a

bit about matrix math, this can be a bit daunting to use. On the bright side, with the

method, you can do just about anything you want. Here a simple example skews and

moves some simple rectangles. The result is shown in Figure 2-5.