# Geometry Api

## DOMMatrix

The DOMMatrix class represents the transformation matrix in 2D or 3D space.

Show:
Hide:
constructor description
DOMMatrix() Creates identity matrix for 2D space.
DOMMatrix(cssTransform) Creates matrix from the css transform value, for example from string
'scale(2) translate(10px, 10px)'
DOMMatrix(m11, m12,...,m44) Creates the transform matrix for 3D space.
``````m11 m12 m13 m14
m21 m22 m23 m24
m31 m32 m33 m34
m41 m42 m43 m44``````
DOMMatrix(a, b, c, d, e, f) Creates the transform matrix for 2D space.
``````a c e
b d f
0 0 1
``````
properties description
a,b,...,f Matrix elements passed through the constructor. a element is the same as m11, b is the same as m12 and etc.
m11, m12,..., m44 Matrix elements passed through the constructor.
is2D Value is true, if matrix was initialized as a 2D matrix. Read only.
isIdentity Value is true if the matrix is the identity matrix. Read only.
method description
invertSelf() Modifies the matrix by inverting it and returns itself.
multiplySelf(m) Modifies the matrix by post-multiplying it with the specified matrix and returns itself.
preMultiplySelf(m) Modifies the matrix by pre-multiplying it with the specified matrix and returns itself.
translateSelf([x [, y [, z]]) Applies the specfied translation and returns itself.
rotateSelf(degZ) Applies the specified rotation around the z-axis by angle degZ in degrees and returns this matrix and returns itself.
rotateSelf(degZ) Applies the specified rotation around the z-axis by angle degZ in degrees and returns itself.
rotateSelf([degX [, degY [, degZ]]) Applies the specified rotation and returns itself.
scaleSelf([fX [, fY [, fZ [, oX [, oY [, oZ] ]]]]]) Applies the specfied scale, then applies the translation transform (-oX, -oY, -oZ) and returns itself. Parameters f* specify the scale factors on each axis, default value is 1.
scale3DSelf([f [, oX [, oY [, oZ] ]]]) Applies the specfied scale, then applies the translation transform (-oX, -oY, -oZ) and returns itself.
skewXSelf(sX) Applies the specified skew transformation along the X-axis and returns itself. Parameter sX is angle in degree.
skewYSelf(sY) Applies the specified skew transformation along the Y-axis and returns itself. Parameter sY is angle in degree.
static members
method description
fromFloat32Array(vals) Same as contructor (a,...,f) or (m11,...,m44).
fromFloat64Array(vals) Same as contructor (a,...,f) or (m11,...,m44).

There is a class DOMMatrixReadOnly in which properties a, ..., f and m11, ..., m44 are read only.

## DOMPoint

The DOMPoint class represents a 3D point using homogeneous coordinates.

constructor description
DOMPoint([x [, y [, z [, w]]]]) Creates new point. x, y, z by default are 0. w by default 1.
property description
x x coordinate of the point.
y y coordinate of the point.
z z coordinate of the point.
w w coordinate of the point. Typically is 1, but can be changed after projection.

There is a class DOMPointReadOnly in which properties are read only.

## DOMRect

The DOMRect class represents a rectangular region an element occupies in the viewport. For example, the Element.getBoundingClientRect() method returns a DOMRect containing the position of the Element.

constructor description
DOMRect([x [, y [, width [, height]]]]) Creates new rectangle. By default the x, y, width and height paramters are 0.
property description
x x coordinate of the rectangle.
y y coordinate of the rectangle.
width Width of the point.
height Height of the point.

There is a class DOMRectReadOnly in which properties are read only.

## DOMRectList

The DOMRectList class represents a list of DOMRect objects associated with the object. For example, the Element.getClientRects() method returns a DOMRectList containing a list of DOMRects for each portion of the Element (the text can be split across multiple lines, thus you will get multiple rectangles).

It has a length property that indicates the number of rectangles.

You can get an item by index via the [] operator or the item(ind) method.

DOMRectList only exists for compatibility with legacy Web content. When specifying a new API, DOMRectList must not be used. Use sequence<DOMRect> instead.

The DOMRect class represents a quadrilateral.

constructor description
DOMQuad([p1 [, p2 [, p3 [, p4]]]]) Creates new quadrilateral. Parameters p* can be DOMPointReadOnly/DOMPoint objects.
property description
p1, p2, p3, p4 Specify points of the quadrilateral.
method description
getBounds() Returns a DOMRect object with the coordinates and dimensions of the DOMQuad object.
static members
method description
fromRect(rect) Returns a new DOMQuad object based on the passed set of coordinates.
fromQuad(quad) Returns a new DOMQuad object based on the passed set of coordinates.
toJSON() Returns a JSON representation of the DOMQuad object.