DOMMatrixReadOnly - Web APIs
the dommatrixreadonly interface represents a read-only 4×4 matrix, suitable for 2d and 3d operations.
... the dommatrix interrface—which is based upon dommatrixreadonly—adds mutability, allowing you to alter the matrix after creating it.
... dommatrixreadonly.flipx() returns a new dommatrix created by flipping the source matrix around its x-axis.
...And 24 more matches

DOMMatrix - Web APIs
the dommatrix interface represents 4×4 matrices, suitable for 2d and 3d operations including rotation and translation.
... it is a mutable version of the dommatrixreadonly interface.
... constructor dommatrix() creates and returns a new dommatrix object.
...And 22 more matches

DOMMatrixReadOnly.scale() - Web APIs
the scale() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix with a scale transform applied.
... dommatrix.scale(scalex[, scaley][, scalez][, originx][, originy][, originz]) parameters scalex a multiplier for the scale value on the x-axis.
... return value returns a dommatrix containing a new matrix being the result of the matrix x and y dimensions being scaled by the given factor, centered on the origin given.
...And 3 more matches

DOMMatrix() - Web APIs
the dommatrix constructor creates a new dommatrix object which represents 4x4 matrices, suitable for 2d and 3d operations..
... syntax var dommatrix = new dommatrix([init]) parameters init optional a string containing a sequence of numbers or an array of numbers specifying the matrix you want to create, or a css transform string.
... example this example creates a dommatrix to use as an argument for calling point.matrixtransform().
... var point = new dompoint(5, 4); var scalex = 2; var scaley = 3; var translatex = 12; var translatey = 8; var angle = math.pi / 2; var matrix = new dommatrix([ math.sin(angle) * scalex, math.cos(angle) * scalex, -math.sin(angle) * scaley, math.cos(angle) * scaley, translatex, translatey ]); var transformedpoint = point.matrixtransform(matrix); specifications specification status comment geometry interfaces module level 1the definition of 'dommatrix' in that specification.

DOMMatrixReadOnly.translate() - Web APIs
the translate() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix with a translation applied.
... dommatrix.translate(translatex, translatey[, translatez]) parameters translatex a number representing the abscissa (x-coordinate) of the translating vector.
... return value returns a dommatrix containing a new matrix being the result of the matrix being translated by the given vector.
... const matrix = new dommatrixreadonly().translate(25, 25); document.queryselector('#transformed').setattribute('transform', matrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.translate()' in that specification.

DOMMatrixReadOnly() - Web APIs
the dommatrixreadonly constructor creates a new dommatrixreadonly object which represents 4x4 matrices, suitable for 2d and 3d operations.
... syntax var dommatrixreadonly = new dommatrixreadonly([init]) parameters init optional either a string containing a sequence of numbers or an array of integers specifying the matrix you want to create.
... specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly' in that specification.

DOMMatrixReadOnly.flipX() - Web APIs
the flipx() method of the dommatrixreadonly interface creates a new matrix being the result of the original matrix flipped about the x-axis.
... syntax dommatrix.flipx() return value returns a dommatrix containing a new matrix being the result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by dommatrix(-1, 0, 0, 1, 0, 0).
... const flipped = document.getelementbyid('flipped'); const matrix = new dommatrixreadonly(); const flippedmatrix = matrix.flipx(); flipped.setattribute('transform', flippedmatrix.tostring()); screenshotlive sample specifications specification status comment geometry interfaces module level 1the definition of 'dommatrixreadonly.flipx()' in that specification.

Index - Web APIs
use dommatrix instead.
... 557 canvasrenderingcontext2d.currenttransform api, canvas, canvasrenderingcontext2d, experimental, property, reference the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current transformation matrix.
... 718 dommatrix api, dommatrix, experimental, geometry, geometry interfaces, interface, reference, matrix the dommatrix interface represents 4x4 matrices, suitable for 2d and 3d operations including rotation and translation.
...And 8 more matches

CanvasPattern.setTransform() - Web APIs
the canvaspattern.settransform() method uses an svgmatrix or dommatrix object as the pattern's transformation matrix and invokes it on the pattern.
... syntax void pattern.settransform(matrix); parameters matrix an svgmatrix or dommatrix to use as the pattern's transformation matrix.
...byid('svg1'); var matrix = svg1.createsvgmatrix(); var img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { var pattern = ctx.createpattern(img, 'repeat'); pattern.settransform(matrix.rotate(-45).scale(1.5)); ctx.fillstyle = pattern; ctx.fillrect(0, 0, 400, 400); }; note that newer browser versions started to support dommatrix as an input to settransform(), so for example you could replace the svgmatrix in the above example with the following: const matrix = new dommatrix([1, .2, .8, 1, 0, 0]); edit the code below and see your changes update live in the canvas: playable code <canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> <svg id="svg1" style="display:none"></svg> <div class="playabl...

CanvasRenderingContext2D.getTransform() - Web APIs
return value a dommatrix object.
... the transformation matrix is described by: [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right] note: the returned object is not live, so updating it will not affect the current transformation matrix, and updating the current transformation matrix will not affect an already returned dommatrix.
... we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform(), and draw a circle on it.

CanvasRenderingContext2D.setTransform() - Web APIs
the newer type consists of a single parameter, matrix, representing a 2d transformation matrix to set (technically, a dommatrixinit object; any object will do as long as it contains the above components as properties).
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100); result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
... we then apply the retrieved matrix directly to the second canvas context by passing the dommatrix object directly to settransform() (i.e.

CanvasRenderingContext2D.currentTransform - Web APIs
the canvasrenderingcontext2d.currenttransform property of the canvas 2d api returns or sets a dommatrix (current specification) or svgmatrix (old specification) object for the current transformation matrix.
... syntax ctx.currenttransform [= value]; value a dommatrix or svgmatrix object to use as the current transformation matrix.

Path2D.addPath() - Web APIs
transform optional a dommatrix to be used as the transformation matrix for the path that is added.
... (technically a dommatrixinit object).

SVGGraphicsElement - Web APIs
svggraphicselement.getctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to its svg viewport's coordinate system.
... svggraphicselement.getscreenctm() returns a dommatrix representing the matrix that transforms the current element's coordinate system to the coordinate system of the svg viewport for the svg document fragment.

Window - Web APIs
window.dommatrix read only returns a reference to a dommatrix object, which represents 4x4 matrices, suitable for 2d and 3d operations.
... window.dommatrixreadonly read only returns a reference to a dommatrixreadonly object, which represents 4x4 matrices, suitable for 2d and 3d operations.