recursal/MDN huggingface dataset:
Optimizing canvas
=================

`<canvas>` es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.

A continuación una lista de tips par mejorar el rendimiento:

* Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.
* Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).
* Avoid floating-point coordinates and use integers instead.
* Avoid unnecessary canvas state changes.
* Render screen differences only, not the whole new state.
* Utilice varios lienzos en capas para escenas complejas.
* Evite la propiedad `shadowBlur` siempre que sea posible.
* Con las animaciones, use `window.requestAnimationFrame()`.
* Probar el rendimiento con JSPerf.
* « Anterior
Dibujar texto usando canvas
===========================

El elemento `<canvas>` permite dibujar texto en él a través de una API experimental de Mozilla.

### API
```

attribute DOMString mozTextStyle;
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
```

### Notas

* El tipo de letra predeterminado es sans-serif 12pt.
* Estas extensiones de texto no están aún estandarizadas por WHATWG.
* No necesitas un contexto especial para usarlas; el contexto 2D funciona bien.
* Todos los dibujos se realizan usando la transformación actual.
* Revisa el Error 339553 en Firefox si quieres leer más sobre las implementaciones específicas.
### Demostraciones

Mira algunos ejemplos aquí, aquí, y aquí.

### Cambiar el tipo de letra actual

El atributo `mozTextStyle` contiene el estilo de texto actual. Usa la misma sintaxis que el especificado para las tipografías CSS.

Ej:
```

ctx.mozTextStyle = "20pt Arial"
```

### Dibujar texto

Dibujar es muy sencillo. `mozDrawText` usa el estilo de texto actual, cualquiera que sea éste. Se usa el color de relleno del contexto como color del texto.
```

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");
```

### Medir texto

A veces es útil saber qué tan ancho es un trozo de texto en particular (para centrarlo en una ventana, por ejemplo).
```

var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate(len/2, 0);
ctx.mozDrawText(text);
```

### Interacción texto/trazo

Si quieres tachar un texto, `mozDrawText` no te lo permite. En cambio, `mozPathText` agrega el tachado de texto al trazo actual.
```

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()
```


Supongamos ahora que quieres agregar un texto que se acomode a un trazo que dibujaste (una línea curva o algo parecido) es donde aparece `mozTextAlongPath`. Al contrario de otras funciones de texto, `mozTextAlongPath` necesita dos argumentos: el texto y qué se quiere hacer con él. `mozTextAlongPath` aproxima el trazo actual como una serie de segmentos de línea y ubica cada carácter encima de ese trazo. Los caracteres no son cambiados de tamaño o transformados de acuerdo a la curvatura de la base; toman la orientación del trazo a la mitad del carácter.

Una vez que `mozTextAlongPath` sabe dónde está el carácter, busca el segundo parámetro para decidir qué hacer con él. Si el segundo parámetro es `false`, entonces dibuja el carácter como lo haría `mozDrawText`. Si es `true`, agrega el carácter al trazo actual, como lo hace `mozPathText`. Esto puede usarse para crear efectos únicos.
Worker.terminate()
==================

El método **`terminate()`** de la interfaz `Worker` termina inmediatamente el `Worker`. Esto no ofrece la oportunidad de finalizar las operaciones que estuviera realizando el worker, termina la ejecución por completo.

Sintaxis
--------


```js
myWorker.terminate();
```

### Parámetros

Ninguno.

### Retorna

Nada.

Ejemplo
-------

El siguiente extracto de código muestra la creación de un objeto `Worker` usando el constructor de `Worker()` (en-US) y éste es inmediatamente terminado.


```js
var myWorker = new Worker("worker.js");

myWorker.terminate();
```

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # dom-worker-terminate-dev |

Compatibilidad con navegadores
------------------------------

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

Mirar también
-------------

La interfaz `Worker` a la que pertenece.
Coordinates.latitude
====================

**`Coordinates.latitude`** es una propiedad de sólo lectura que devuelve un `double` representando la latitud de la posición en grados decimales.

Sintaxis
--------


```js
lat = coordinates.latitude;
```

Especificaciones
----------------

| Specification |
| --- |
| Geolocation API # latitude-longitude-and-accuracy-attributes |

Compatibilidad con navegadores
------------------------------

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

Mirar también
-------------

* Uso de geolocalización
* La interfaz `Coordinates` a la que pertenece.
Crypto.getRandomValues()
========================

 El método **`Crypto.getRandomValues()`** permite obtener valores aleatorios criptográficamente fuertes.
 El arreglo dado como parámetro se rellena con números aleatorios (aleatorios en su significado criptográfico).

 Para garantizar un rendimiento suficiente, las implementaciones no utilizan un verdadero generador de números aleatorios, sino un generador de números pseudoaleatorios *sembrado* con un valor con suficiente entropía.
 El algoritmo del generador de números pseudoaleatorios (PRNG, por sus siglas en Inglés) puede variar entre *user agents (en-US)*, pero es adecuado para fines criptográficos.

`getRandomValues()` es el único miembro de la interfaz `Crypto` que puede utilizarse desde un contexto inseguro.

Sintaxis
--------


```js
getRandomValues(typedArray)
```

### Parametros

`typedArray`

 Un `TypedArray` de enteros, que puede ser uno de los siguientes: `Int8Array` (en-US), `Uint8Array`,
 `Uint8ClampedArray` (en-US), `Int16Array` (en-US), `Uint16Array` (en-US),
 `Int32Array` (en-US), `Uint32Array` (en-US), `BigInt64Array` (en-US),
 `BigUint64Array` (en-US) (pero **no** `Float32Array` ni `Float64Array`).
 Todos los elementos de la matriz se sobrescribirán con números aleatorios.


### Valor devuelto

 El mismo array pasado como `typedArray` pero con su contenido reemplazado por los nuevos números aleatorios generados.
 Tenga en cuenta que se modifica el `typedArray` original y no se realiza ninguna copia.

### Excepciones

`QuotaExceededError` `DOMException`

Se produce si `byteLength` (en-US) de `typedArray` supera 65,536.

Notas de uso
------------

 No utilice `getRandomValues()` para generar claves de cifrado.
 En su lugar, utilice el método `generateKey()` (en-US).
 Hay algunas razones para ello; por ejemplo, no se garantiza que `getRandomValues()` se ejecute en un contexto seguro.

 No existe un grado mínimo de entropía exigido por la especificación Web Cryptography.
 En su lugar, se pide a los *User Agents* a que proporcionen la mejor entropía que puedan al generar números aleatorios, utilizando un generador de números pseudoaleatorios bien definido y eficiente integrado en el propio *User Agent*, pero sembrado con valores tomados de una fuente externa de números pseudoaleatorios, como una función de números aleatorios específica de la plataforma, el dispositivo `/dev/urandom` de Unix u otra fuente de datos aleatorios o pseudoaleatorios.

Ejemplos
--------


```js
const array = new Uint32Array(10);
self.crypto.getRandomValues(array);

console.log("Sus números de la suerte:");
for (const num of array) {
  console.log(num);
}
```

Especificaciones
----------------

| Specification |
| --- |
| Web Cryptography API # Crypto-method-getRandomValues |

Compatibilidad con navegadores
------------------------------

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

Véase también
-------------

* API Web Crypto
* `crypto` para obtener un objeto `Crypto`.
* `Math.random`, una fuente no criptográfica de números aleatorios.
Crypto.subtle
=============

La propiedad de sólo lectura **`Crypto.subtle`** retorna un objeto `SubtleCrypto` permitiendo realizar operaciones criptográficas.

Sintaxis
--------
```

var crypto = crypto.subtle;
```

Especificaciones
----------------

| Specification |
| --- |
| Web Cryptography API # Crypto-attribute-subtle |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* `Crypto`.
* `SubtleCrypto`.
* Compatibility test page.
* Shim for IE11 and Safari.
WheelEvent.deltaY
=================

La propiedad de solo lectura **`WheelEvent.deltaY`** es un `double` que representa la cantidad de deslizamiento vertical en la unidad `WheelEvent.deltaMode` (en-US) .

Sintaxis
--------
```

var dY = event.deltaY;
```

Ejemplo
-------


```js
var syntheticEvent = new WheelEvent("syntheticWheel", {
  deltaY: 4,
  deltaMode: 0,
});

console.log(syntheticEvent.deltaY);
```

Especificaciones
----------------

| Specification |
| --- |
| UI Events # dom-wheelevent-deltay |

Compatibilidad con navegadores
------------------------------

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

Ver más
-------

* `wheel`
* `WheelEvent`
Tutoral de WebGL
================

Este tutorial describe cómo usar el elemento `<canvas>` para dibujar gráficos WebGL, comenzando con lo básico. Los ejemplos proporcionados deberían darle algunas ideas claras de lo que puede hacer con WebGL y le proporcionarán fragmentos de código que pueden ayudarlo a comenzar a crear su propio contenido.

WebGL permite que el contenido web use una API basada en OpenGL ES 2.0 para realizar la representación 3D en un HTML `<canvas>` en navegadores que lo admitan sin el uso de complementos. Los programas WebGL consisten en un código de control escrito en JavaScript y un código de efectos especiales (código sombra) que se ejecuta en la Unidad de procesamiento de gráficos (GPU) de una computadora. Los elementos WebGL se pueden mezclar con otros elementos HTML y combinar con otras partes de la página o el fondo de la página.

Antes de comenzar
-----------------

Usar el elemento `<canvas>` no es muy difícil, pero se necesita una comprensión básica de HTML y JavaScript. El elemento `<canvas>` y WebGL no son compatibles con algunos navegadores antiguos, pero sí lo son con las versiones recientes de todos los principales navegadores. Para dibujar gráficos en el lienzo, usamos un objeto de contexto de JavaScript, que crea gráficos sobre la marcha.

En este tutorial
----------------

Primeros pasos con WebGL

Cómo configurar un contexto WebGL.

Agregar contenido 2D a un contexto WebGL

Cómo renderizar formas planas simples usando WebGL.

Uso de *shaders* para aplicar color en WebGL

Demuestra cómo agregar color a las formas usando *shaders*.

Animar objetos con WebGL (en-US)

Muestra cómo rotar y trasladar objetos para crear animaciones simples.

Creación de objetos 3D usando WebGL

Muestra cómo crear y animar un objeto 3D (en este caso, un cubo).

Usar texturas en WebGL

Demuestra cómo asignar texturas a las caras de un objeto.

Iluminación en WebGL (en-US)

Cómo simular efectos de iluminación en su contexto WebGL.

Animación de texturas en WebGL

Muestra cómo animar texturas; en este caso, mapeando un video Ogg en las caras de un cubo giratorio.
KeyboardEvent.metaKey
=====================

La propiedad **`KeyboardEvent.metaKey`** es de solo lectura y regresa un valor `Boolean` que indica si la tecla `Meta` estaba presionada (true) o no (false) cuando el evento ocurrio.

**Nota:** En teclados Macintosh es la tecla comando (`⌘`). En teclados Windows la tecla es lla tecla window (`⊞`).

Syntax
------
```

var metaKeyPressed = instanceOfKeyboardEvent.metaKey
```

### Valor de retorno

`Boolean`Ejemplo
-------


```js
function goInput(e) {
  // Revisa si estaba presionada la tecla meta y
  if (e.metaKey) {
    // realiza esto en caso de cierto
    superSizeOutput(e);
  } else {
    //Realiz esto en caso de falso
    doOutput(e);
  }
}
```

metaKey
-------

### Contenido HTML


```html
<div id="example" onmousedown="ismetaKey(event);">
  ¡Presiona la tecla meta y dame click!
  <div></div>
</div>
```

### Contenido Javascript


```js
function ismetaKey(e) {
  var el = document.getElementById("example"); //Toma el control del div example
  var mK = e.metaKey; //Obtiene el valor de metaKey y lo almacena
  el.innerHTML = "¡Presiona la tecla meta y dame click!</br>metaKey:" + mK; //Muestra el valor de metaKey
}
```

Especificaciones
----------------

| Specification |
| --- |
| UI Events # dom-keyboardevent-metakey |

Compatibilidad de Navegadores
-----------------------------

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

Véase también
-------------

* `KeyboardEvent`
MediaQueryList.addListener()
============================

El método **`addListener()`** de la interfaz `MediaQueryList` añade un escucha al `MediaQueryListener` que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios.
Esto es básicamente un alias para `EventTarget.addEventListener()`, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos se puede usar `addEventListener.`

Sintaxis
--------
```

MediaQueryList.addListener(func)
```

### Parametros

func

A function or function reference representing the callback function you want to run when the media query status changes. In the original implementation, the callback was a non-standard `MediaQueryListListener` (en-US) object. In the new implementation the standard event mechanism is used, the callback is a standard function, and the event object is a `MediaQueryListEvent` (en-US), which inherits from `Event`.

### Return value

Void.

Examples
--------


```js
var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /\* the viewport is more than than 600 pixels wide \*/
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addListener(screenTest);
```

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-addlistener |

Compatibilidad con navegadores
------------------------------

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

See also
--------

* Media queries
* Using media queries from code (en-US)
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
MediaQueryList.matches
======================

La propiedad **`matches`** de sólo lectura de la interfaz `MediaQueryList` es `Boolean` (en-US) que devuelve `true` si el `document` coincide actualmente con el medio lista de consultas, o `false` si no.

Sintaxis
--------
```

var matches = MediaQueryList.matches;
```

### Value

A `Boolean` (en-US); returns `true` if the `document` currently matches the media query list, `false` if not.

Examples
--------


```js
var mql = window.matchMedia("(max-width: 600px)");

if (mql.matches) {
  // media query test returning true
}
```

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-matches |

Compatibilidad con navegadores
------------------------------

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

See also
--------

* Media queries
* Using media queries from code (en-US)
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
MediaQueryList.removeListener()
===============================

El método **`removeListener()`** de la interfaz `MediaQueryList` elimina un escucha de `MediaQueryListener`.

Esto es básicamente un alias para `EventTarget.removeEventListener()`, para propósitos de compatibilidad con versiones anteriores: en los navegadores antiguos puede usar `removeEventListener()`.

Sintaxis
--------
```

MediaQueryList.removeListener(func)
```

### Parametros

func

Una función o referencia de función que representa la función de devolución de llamada que desea eliminar. En la implementación original, la devolución de llamada era un objeto `MediaQueryListListener` (en-US) no estándar. En la nueva implementación se utiliza el mecanismo de eventos estándar y la devolución de llamada es una función estándar.

### Return value

Void.

Ejemplos
--------


```js
var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /\* the viewport is 600 pixels wide or less \*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /\* the viewport is more than than 600 pixels wide \*/
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addListener(screenTest);

// Later on, when it is no longer needed
mql.removeListener(screenTest);
```

Especificaciones
----------------

| Specification |
| --- |
| CSSOM View Module # dom-mediaquerylist-removelistener |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* Media queries
* Using media queries from code (en-US)
* `window.matchMedia()`
* `MediaQueryList`
* `MediaQueryListEvent` (en-US)
CanvasRenderingContext2D.fillRect()
===================================

El método **`CanvasRenderingContext2D.fillRect()`** de la API Canvas 2D dibuja un rectángulo relleno en la posición ( x, y ). El tamaño del rectángulo se determina por width (anchura) y height (altura). El estilo de relleno se determina por el atributo `fillStyle`.

Sintaxis
--------
```

void ctx.fillRect(x, y, width, height);
```

### Parámetros

`x`

La componente x de la coordenada para el punto de comienzo del rectángulo.

`y`

La componente y de la coordenada para el punto de comienzo del rectángulo.

`width`

La anchura del rectángulo.

`height`

La altura del rectángulo.

Ejemplos
--------

### Usando el método `fillRect`

El siguiente fragmento de código usa el método `fillRect`.

#### HTML


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


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// Rellenar el canvas completo
// ctx.fillRect(0, 0, canvas.width, canvas.height);
```


Edita el código que se encuentra a continuación y observa en vivo los cambios actualizados en el canvas:
```

<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">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea
>
```


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

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

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

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

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

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-fillrect-dev |

Compatibilidad con navegadores
------------------------------

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

Documentos relacionados
-----------------------

* The interface defining it, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillStyle` (en-US)
* `CanvasRenderingContext2D.clearRect()`
* `CanvasRenderingContext2D.strokeRect()` (en-US)
CanvasRenderingContext2D.beginPath()
====================================

El método **`CanvasRenderingContext2D.beginPath()`** del API Canvas 2D comienza una nueva ruta vaciando la lista de sub-rutas. Invoca este método cuando quieras crear una nueva ruta.

Sintaxis
--------
```

void ctx.beginPath();
```

Ejemplos
--------

### Usando el método `beginPath`

Este es solo un trozo de código el cual usa el método `beginPath`.

#### HTML


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


#### JavaScript


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

// First path
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = "green";
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();
```


Edita el código aquí debajo y mira tus cambios actualizarse en vivo en el canvas:
```

<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:200px">
// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20,20);
ctx.lineTo(120, 120);
ctx.stroke();</textarea
>
```


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

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

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

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

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

Especificaciones
----------------

| Specification |
| --- |
| HTML Standard # dom-context-2d-beginpath-dev |

Compatibilidad con navegadores
------------------------------

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

Ver también
-----------

* The interface defining it, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.closePath()` (en-US)