diff --git a/files/en-us/web/api/dommatrix/index.md b/files/en-us/web/api/dommatrix/index.md index 08d2b89d0eda675..f4c4e174e700f37 100644 --- a/files/en-us/web/api/dommatrix/index.md +++ b/files/en-us/web/api/dommatrix/index.md @@ -51,7 +51,7 @@ _This interface includes the following methods, as well as the methods it inheri - {{domxref("DOMMatrix.multiplySelf()")}} - : Modifies the matrix by post-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `A⋅B`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself. - {{domxref("DOMMatrix.preMultiplySelf()")}} - - : Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. Returns itself. + - : Modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. Returns itself. - {{domxref("DOMMatrix.translateSelf()")}} - : Modifies the matrix by applying the specified vector. The default vector is `[0, 0, 0]`. Returns itself. - {{domxref("DOMMatrix.scaleSelf()")}} diff --git a/files/en-us/web/api/dommatrix/multiplyself/index.md b/files/en-us/web/api/dommatrix/multiplyself/index.md new file mode 100644 index 000000000000000..d3e8fc4c3dedc7d --- /dev/null +++ b/files/en-us/web/api/dommatrix/multiplyself/index.md @@ -0,0 +1,58 @@ +--- +title: "DOMMatrix: multiplySelf() method" +short-title: multiplySelf() +slug: Web/API/DOMMatrix/multiplySelf +page-type: web-api-instance-method +browser-compat: api.DOMMatrix.multiplySelf +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`multiplySelf()`** method of the {{domxref("DOMMatrix")}} interface multiplies a matrix by the `otherMatrix` parameter, computing the dot product of the original matrix and the specified matrix: `A⋅B`. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is `0` _except_ the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`. + +To multiply a matrix without mutating it, see {{domxref("DOMMatrixReadOnly.multiply()")}}. + +## Syntax + +```js-nolint + DOMMatrix.multiplySelf() + DOMMatrix.multiplySelf(otherMatrix) +``` + +### Parameters + +- `otherMatrix` {{optional_inline}} + - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier. + +### Return value + +Returns itself; the [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) updated to the results of the applied multiplications. + +## Examples + +```js +const matrix = new DOMMatrix().rotate(30); + +console.log(matrix.toString()); +// output: matrix(0.866, 0.5, -0.5, 0.866, 0, 0) + +matrix.multiplySelf(matrix); + +console.log(matrix.toString()); +// output: matrix(0.5, 0.866, -0.866, 0.5, 0, 0) (a 60deg rotation) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrixReadOnly.multiply()")}} +- {{domxref("DOMMatrix.preMultiplySelf()")}} +- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function +- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function diff --git a/files/en-us/web/api/dommatrix/premultiplyself/index.md b/files/en-us/web/api/dommatrix/premultiplyself/index.md new file mode 100644 index 000000000000000..3faf6c045298a47 --- /dev/null +++ b/files/en-us/web/api/dommatrix/premultiplyself/index.md @@ -0,0 +1,57 @@ +--- +title: "DOMMatrix: preMultiplySelf() method" +short-title: preMultiplySelf() +slug: Web/API/DOMMatrix/preMultiplySelf +page-type: web-api-instance-method +browser-compat: api.DOMMatrix.preMultiplySelf +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`preMultiplySelf()`** method of the {{domxref("DOMMatrix")}} interface modifies the matrix by pre-multiplying it with the specified `DOMMatrix`. This is equivalent to the dot product `B⋅A`, where matrix `A` is the source matrix and `B` is the matrix given as an input to the method. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is `0` _except_ the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`. + +## Syntax + +```js-nolint + DOMMatrix.preMultiplySelf() + DOMMatrix.preMultiplySelf(otherMatrix) +``` + +### Parameters + +- `otherMatrix` {{optional_inline}} + - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier. + +### Return value + +Returns itself; a [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) updated to results of the applied multiplications. + +## Examples + +```js +const matrix = new DOMMatrix().translate(3, 22); +const otherMatrix = new DOMMatrix().translateSelf(15, 45); + +console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 3, 22) +console.log(otherMatrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45) + +matrix.preMultiplySelf(otherMatrix); + +console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 18, 67) +console.log(otherMatrix.toString()); // output: matrix(1, 0, 0, 1, 15, 45) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrix.multiplySelf()")}} +- {{domxref("DOMMatrixReadOnly.multiply()")}} +- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function +- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function diff --git a/files/en-us/web/api/dommatrixreadonly/index.md b/files/en-us/web/api/dommatrixreadonly/index.md index 459b9e2131948f0..943fb6b355eab6b 100644 --- a/files/en-us/web/api/dommatrixreadonly/index.md +++ b/files/en-us/web/api/dommatrixreadonly/index.md @@ -50,7 +50,7 @@ _This interface doesn't inherit any methods. None of the following methods alter - {{domxref("DOMMatrixReadOnly.inverse()")}} - : Returns a new {{domxref("DOMMatrix")}} created by inverting the source matrix. The original matrix is not altered. - {{domxref("DOMMatrixReadOnly.multiply()")}} - - : Returns a new {{domxref("DOMMatrix")}} created by computing the dot product of the source matrix and the specified matrix: `A⋅B`. If no matrix is specified as the multiplier, the matrix is multiplied by a matrix in which every element is `0` _except_ the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`. The original matrix is not modified. + - : Returns a new {{domxref("DOMMatrix")}} created by computing the dot product of the source matrix and the specified matrix. The original matrix is not - {{domxref("DOMMatrixReadOnly.rotateAxisAngle()")}} - : Returns a new {{domxref("DOMMatrix")}} created by rotating the source matrix by the given angle around the specified vector. The original matrix is not modified. - {{domxref("DOMMatrixReadOnly.rotate()")}} diff --git a/files/en-us/web/api/dommatrixreadonly/multiply/index.md b/files/en-us/web/api/dommatrixreadonly/multiply/index.md new file mode 100644 index 000000000000000..a331fda5e96478b --- /dev/null +++ b/files/en-us/web/api/dommatrixreadonly/multiply/index.md @@ -0,0 +1,53 @@ +--- +title: "DOMMatrixReadOnly: multiply() method" +short-title: multiply() +slug: Web/API/DOMMatrixReadOnly/multiply +page-type: web-api-instance-method +browser-compat: api.DOMMatrixReadOnly.multiply +--- + +{{APIRef("Geometry Interfaces")}}{{AvailableInWorkers}} + +The **`multiply()`** method of the {{domxref("DOMMatrixReadOnly")}} interface creates and returns a new matrix which is the dot product of the matrix and the `otherMatrix` parameter. If `otherMatrix` is omitted, the matrix is multiplied by a matrix in which every element is `0` _except_ the bottom-right corner and the element immediately above and to its left: `m33` and `m34`. These have the default value of `1`. The original matrix is not modified. + +To mutate the matrix as you multiply it, see {{domxref("DOMMatrix.multiplySelf()")}}. + +## Syntax + +```js-nolint + DOMMatrixReadOnly.multiply() + DOMMatrixReadOnly.multiply(otherMatrix) +``` + +### Parameters + +- `otherMatrix` {{optional_inline}} + - : The [`DOMMatrix`](/en-US/docs/Web/API/DOMMatrix) multiplier. + +### Return value + +A {{domxref("DOMMatrix")}}. + +## Examples + +```js +const matrix = new DOMMatrixReadOnly().translate(13, 21); +const multipliedMatrix = matrix.multiply(matrix); +console.log(matrix.toString()); // output: matrix(1, 0, 0, 1, 13, 21) +console.log(multipliedMatrix.toString()); // output: matrix(1, 0, 0, 1, 26, 42) +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("DOMMatrix.multiplySelf()")}} +- {{domxref("DOMMatrixReadOnly.preMultiply()")}} +- CSS {{CSSxRef("transform-function/matrix", "matrix()")}} function +- CSS {{CSSxRef("transform-function/matrix3d", "matrix3d()")}} function