recursal/MDN huggingface dataset:
CanvasPattern: setTransform() method
====================================

The **`CanvasPattern.setTransform()`** method uses a `DOMMatrix` object as the pattern's transformation matrix and invokes it on the pattern.

Syntax
------


```js
setTransform(matrix)
```

### Parameters

`matrix`

A `DOMMatrix` to use as the pattern's transformation matrix.

### Return value

None (`undefined`).

Examples
--------

### Using the `setTransform` method

 This is just a simple code snippet which uses the `setTransform` method to
 create a `CanvasPattern` with the specified pattern transformation from a
 `DOMMatrix`. The pattern gets applied if you set it as the current
 `fillStyle` and gets drawn onto the
 canvas when using the `fillRect()`
 method, for example.

#### HTML


```html
<canvas id="canvas"></canvas>
```


#### JavaScript


```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

const img = new Image();
img.src = "canvas\_createpattern.png";

img.onload = () => {
  const pattern = ctx.createPattern(img, "repeat");
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
```


#### Editable demo

Here's an editable demo of the code snippet above. Try changing the argument to `SetTransform()` to see the effect it had.
```

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:120px">
const img = new Image();
img.src = 'canvas_createpattern.png';
img.onload = () => {
  const pattern = ctx.createPattern(img, 'repeat');
  pattern.setTransform(matrix.rotate(-45).scale(1.5));
  ctx.fillStyle = pattern;
  ctx.fillRect(0, 0, 400, 400);
};
</textarea>
```


```
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const edit = document.getElementById("edit");
const code = textarea.value;

const matrix = new DOMMatrix([1, 0.2, 0.8, 1, 0, 0]);

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", () => {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", () => {
  textarea.focus();
});

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);
```

Specifications
--------------

| Specification |
| --- |
| HTML Standard # dom-canvaspattern-settransform-dev |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The interface defining this method: `CanvasPattern`
* `DOMMatrix`
CSSMatrixComponent: CSSMatrixComponent() constructor
====================================================

 The **`CSSMatrixComponent()`** constructor
 creates a new `CSSMatrixComponent` object representing the matrix() and matrix3d() values of the
 individual `transform` property in CSS.

Syntax
------


```js
new CSSMatrixComponent(matrix)
new CSSMatrixComponent(matrix, options)
```

### Parameters

`matrix`

A 2d or 3d matrix.

Examples
--------

To do

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmatrixcomponent-cssmatrixcomponent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
CSSMatrixComponent: matrix property
===================================

 The **`matrix`** property of the
 `CSSMatrixComponent` interface gets and sets a 2d or 3d matrix.

 See the matrix() and matrix3d() pages for
 examples.

Value
-----

a matrix.

Examples
--------

To do.

Specifications
--------------

| Specification |
| --- |
| CSS Typed OM Level 1 # dom-cssmatrixcomponent-matrix |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
ANGLE\_instanced\_arrays: vertexAttribDivisorANGLE() method
===========================================================

The **ANGLE\_instanced\_arrays.vertexAttribDivisorANGLE()** method of the WebGL API modifies the rate at which generic vertex attributes advance when rendering multiple instances of primitives with `ext.drawArraysInstancedANGLE()` and `ext.drawElementsInstancedANGLE()`.

**Note:** When using `WebGL2`, this method is available as `gl.vertexAttribDivisor()` by default.

Syntax
------


```js
vertexAttribDivisorANGLE(index, divisor)
```

### Parameters

`index`

A `GLuint` specifying the index of the generic vertex attributes.

`divisor`

A `GLuint` specifying the number of instances that will pass between updates of the generic attribute.

### Return value

None (`undefined`).

Examples
--------


```js
const ext = gl.getExtension("ANGLE\_instanced\_arrays");
ext.vertexAttribDivisorANGLE(0, 2);
```

Specifications
--------------

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ext.drawArraysInstancedANGLE()`
* `ext.drawElementsInstancedANGLE()`
* `WebGLRenderingContext.drawArrays()`
* `WebGLRenderingContext.drawElements()`
* `WebGL2RenderingContext.drawArraysInstanced()`
* `WebGL2RenderingContext.drawElementsInstanced()`
* `WebGL2RenderingContext.vertexAttribDivisor()`
ANGLE\_instanced\_arrays: drawArraysInstancedANGLE() method
===========================================================

The **`ANGLE_instanced_arrays.drawArraysInstancedANGLE()`** method of the WebGL API renders primitives from array data like the `gl.drawArrays()` method. In addition, it can execute multiple instances of the range of elements.

**Note:** When using `WebGL2`, this method is available as `gl.drawArraysInstanced()` by default.

Syntax
------


```js
drawArraysInstancedANGLE(mode, first, count, primcount)
```

### Parameters

`mode`

A `GLenum` specifying the type primitive to render. Possible values are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`first`

A `GLint` specifying the starting index in the array of vector points.

`count`

A `GLsizei` specifying the number of indices to be rendered.

`primcount`

A `GLsizei` specifying the number of instances of the range of elements to execute.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a `gl.INVALID_ENUM` error is thrown.
* If `first`, `count` or `primcount` are negative, a `gl.INVALID_VALUE` error is thrown.
* if `gl.CURRENT_PROGRAM` is `null`, a `gl.INVALID_OPERATION` error is thrown.
Examples
--------


```js
const ext = gl.getExtension("ANGLE\_instanced\_arrays");
ext.drawArraysInstancedANGLE(gl.POINTS, 0, 8, 4);
```

Specifications
--------------

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ext.drawElementsInstancedANGLE()`
* `ext.vertexAttribDivisorANGLE()`
* `WebGLRenderingContext.drawArrays()`
* `WebGLRenderingContext.drawElements()`
* `WebGL2RenderingContext.drawArraysInstanced()`
* `WebGL2RenderingContext.drawElementsInstanced()`
* `WebGL2RenderingContext.vertexAttribDivisor()`
* `WEBGL_multi_draw.multiDrawArraysInstancedWEBGL()`
ANGLE\_instanced\_arrays: drawElementsInstancedANGLE() method
=============================================================

The **`ANGLE_instanced_arrays.drawElementsInstancedANGLE()`** method of the WebGL API renders primitives from array data like the `gl.drawElements()` method. In addition, it can execute multiple instances of a set of elements.

**Note:** When using `WebGL2`, this method is available as `gl.drawElementsInstanced()` by default.

Syntax
------


```js
drawElementsInstancedANGLE(mode, count, type, offset, primcount)
```

### Parameters

`mode`

A `GLenum` specifying the type primitive to render. Possible values are:

* `gl.POINTS`: Draws a single dot.
* `gl.LINE_STRIP`: Draws a straight line to the next vertex.
* `gl.LINE_LOOP`: Draws a straight line to the next vertex, and connects the last vertex back to the first.
* `gl.LINES`: Draws a line between a pair of vertices.
* `gl.TRIANGLE_STRIP`
* `gl.TRIANGLE_FAN`
* `gl.TRIANGLES`: Draws a triangle for a group of three vertices.

`count`

A `GLsizei` specifying the number of elements to be rendered.

`type`

A `GLenum` specifying the type of the values in the element array buffer. Possible values are:

* `gl.UNSIGNED_BYTE`
* `gl.UNSIGNED_SHORT`
* `gl.UNSIGNED_INT` when using the `OES_element_index_uint` extension.

`offset`

A `GLintptr` specifying an offset in the element array buffer. Must be a valid multiple of the size of the given `type`.

`primcount`

A `GLsizei` specifying the number of instances of the set of elements to execute.

### Return value

None (`undefined`).

### Exceptions

* If `mode` is not one of the accepted values, a `gl.INVALID_ENUM` error is thrown.
* If `offset` is an invalid multiple of the size of the given type, a `gl.INVALID_OPERATION` error is thrown.
* If `count` or `primcount` are negative, a `gl.INVALID_VALUE` error is thrown.
Examples
--------


```js
const ext = gl.getExtension("ANGLE\_instanced\_arrays");
ext.drawElementsInstancedANGLE(gl.POINTS, 2, gl.UNSIGNED\_SHORT, 0, 4);
```

Specifications
--------------

| Specification |
| --- |
| WebGL ANGLE\_instanced\_arrays Khronos Ratified Extension Specification  |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `ext.drawArraysInstancedANGLE()`
* `ext.vertexAttribDivisorANGLE()`
* `WebGLRenderingContext.drawArrays()`
* `WebGLRenderingContext.drawElements()`
* `WebGL2RenderingContext.drawArraysInstanced()`
* `WebGL2RenderingContext.drawElementsInstanced()`
* `WebGL2RenderingContext.vertexAttribDivisor()`
* `WEBGL_multi_draw.multiDrawElementsInstancedWEBGL()`
RTCInboundRtpStreamStats: fecPacketsDiscarded property
======================================================

 The **`fecPacketsDiscarded`** property
 of the `RTCInboundRtpStreamStats` dictionary is a numeric value
 indicating the number of RTP Forward Error Correction (FEC) packets
 that have been discarded.

Value
-----

 An unsigned integer value indicating how many FEC packets have been received whose
 error correction payload has been discarded.

 This can happen if all the packets covered by the FEC packet have already been received
 or recovered using another FEC packet, or if the FEC packet arrived outside the recovery
 window and the lost RTP packets have already been skipped during playback as a result.
 The value of `fecPacketsReceived` includes these discarded packets.

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcinboundrtpstreamstats-fecpacketsdiscarded |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: averageRtcpInterval property
======================================================

 The **`averageRtcpInterval`** property
 of the `RTCInboundRtpStreamStats` dictionary is a floating-point value
 indicating the average RTCP transmission interval, in seconds.

 The RTCP interval is the amount of time that should elapse between transmissions of RTCP
 packets.

Value
-----

 A floating-point value indicating the average interval, in seconds, between
 transmissions of RTCP packets. This interval is computed following the formula outlined
 in RFC 1889: A.7.

 Because the interval's value is determined in part by the number of active senders, it
 will be different for each user of a service. Since this value is also used to determine
 the number of seconds after a stream starts to flow before the first RTCP packet should
 be sent, the result is that if many users try to start using the service at the same
 time, the server won't be flooded with RTCP packets coming in all at once.

 The sending endpoint computes this value when sending compound RTCP packets, which must
 contain at least an RTCP RR or SR packet and an SDES packet with the CNAME item.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCInboundRtpStreamStats.averageRtcpInterval`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: firCount property
===========================================

 The **`firCount`** property of the
 `RTCInboundRtpStreamStats` dictionary indicates the number of
 **Full Intra Request** (**FIR**) packets have been sent by
 the receiver to the sender.

 The receiver sends a FIR packet when the stream
 falls behind and needs to skip frames in order to catch up.

Value
-----

 An integer value indicating how many FIR packets have been received by the sender
 during the current connection. This statistic is available only for video tracks.

 The receiver sends a FIR packet to the sender any time it falls behind or loses packets
 and cannot decode the incoming stream any longer because of the lost data. This tells
 the sender to send a full frame instead of a delta frame, so that the receiver can catch
 up.

 The higher `firCount` is, the more often frames were dropped, which may be
 an indication that the media's bit rate is too high for the available bandwidth, or that
 the receiving device is overburdened and is therefore unable to process the incoming
 data.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCInboundRtpStreamStats.firCount`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: remoteId property
===========================================

 The **`remoteId`** property of the
 `RTCInboundRtpStreamStats` dictionary specifies the `id` of the `RTCRemoteOutboundRtpStreamStats` object representing the remote peer's `RTCRtpSender` which is sending the media to the local peer.

Value
-----

 A string containing the ID of the
 `RTCRemoteOutboundRtpStreamStats` object that represents the remote peer's
 `RTCRtpSender` for the synchronization source represented by this stats
 object.

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcinboundrtpstreamstats-remoteid |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: pliCount property
===========================================

 The **`pliCount`** property of the
 `RTCInboundRtpStreamStats` dictionary states the number of times the
 `RTCRtpReceiver` described by these statistics sent a **Picture
Loss Indication** (**PLI**) packet to the sender.

 A PLI
 packet indicates that some amount of encoded video data has been lost for one or more
 frames.

Value
-----

 An integer value indicating the number of times a PLI packet was sent by the
 `RTCRtpReceiver` to the sender. These are sent by the receiver's decoder to
 notify the encoder (the sender) that an undefined amount of coded video data, which may
 span frame boundaries, has been lost. This information is only available for video
 streams.

 This may trigger the sender to send a full frame in order to allow the receiver to
 re-synchronize, since lost data may be an irrecoverable situation for decoding media.
 However, the primary purpose of this message is to allow the sender to consider
 techniques to mitigate network performance issues. This is often achieved by methods
 such as increasing the compression, lowering resolution, or finding other ways to reduce
 the bit rate of the stream.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCInboundRtpStreamStats.pliCount`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* RFC 4585, section 6.3.1: Definition of "PLI messages" in the document *Extended
RTP Profile for Real-time Transport Control Protocol (RTCP)-Based Feedback
(RTP/AVPF)*.
RTCInboundRtpStreamStats: bytesReceived property
================================================

 The `RTCInboundRtpStreamStats` dictionary's
 **`bytesReceived`** property is an integer value which
 indicates the total number of bytes received so far from this synchronization source
 (SSRC).

Value
-----

 An unsigned integer value indicating the total number of bytes received so far on this
 RTP stream, not including header and padding bytes. This value can be used to calculate
 an approximation of the average media data rate:


```js
avgDataRate = rtcInboundRtpStreamStats.bytesReceived / elapsedTime;
```


This value gets reset to zero if the sender's SSRC identifier changes for any reason.

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcinboundrtpstreamstats-bytesreceived |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: type property
=======================================

The **`type`** property of the `RTCInboundRtpStreamStats` dictionary is a string with the value `"inbound-rtp"`.

 Different statistics are obtained by iterating the `RTCStatsReport` object returned by a call to `RTCPeerConnection.getStats()`.
 The type indicates the set of statistics available through the object in a particular iteration step.
 A value of `"inbound-rtp"` indicates that the statistics available in the current step are those defined in `RTCInboundRtpStreamStats`.

Value
-----

A string with the value `"inbound-rtp"`.

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-type |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: timestamp property
============================================

The **`timestamp`** property of the `RTCInboundRtpStreamStats` dictionary is a `DOMHighResTimeStamp` object specifying the time at which the data in the object was sampled.

Value
-----

A `DOMHighResTimeStamp` value indicating the time at which the activity described by the statistics in this object was recorded, in milliseconds elapsed since the beginning of January 1, 1970, UTC.

The value should be accurate to within a few milliseconds but may not be entirely precise, either because of hardware or operating system limitations or because of fingerprinting protection in the form of reduced clock precision or accuracy.

Specifications
--------------

| Specification |
| --- |
| Identifiers for WebRTC's Statistics API # dom-rtcstats-timestamp |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: packetsDuplicated property
====================================================

 The **`packetsDuplicated`** property
 of the `RTCInboundRtpStreamStats` dictionary indicates the total number
 of packets discarded because they were duplicates of previously-received
 packets.

 These packets are not counted by the
 `packetsDiscarded` property.

Value
-----

 An integer value which specifies how many duplicate packets have been received by the
 local end of this RTP stream so far. These duplicate packets are not included in the
 `packetsDiscarded` property.

Usage notes
-----------

 Duplicate packets are detected when a packet has the same RTP sequence number as
 another packet that has previously been processed. Each time a packet is repeated, the
 value of `packetsDuplicated` is incremented, even if the same packet is
 received more than twice.

 You can get a more accurate tally of how many packets have been lost on the stream by
 adding `packetsDuplicated` to
 `packetsLost`. The resulting value
 will be positive, although it will not match the count as computed in RFC 3660.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCInboundRtpStreamStats.packetsDuplicated`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
RTCInboundRtpStreamStats: framesDecoded property
================================================

 The **`framesDecoded`** property of
 the `RTCInboundRtpStreamStats` dictionary indicates the total number of
 frames which have been decoded successfully for this media source.

Value
-----

 An integer value indicating the total number of video frames which have been decoded
 for this stream so far. This represents the number of frames that would have been
 displayed assuming no frames were skipped.

Specifications
--------------

#### No specification found

No specification data found for `api.RTCInboundRtpStreamStats.framesDecoded`.  
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.