recursal/MDN huggingface dataset:
CanvasRenderingContext2D.save()
===============================

El método **`CanvasRenderingContext2D.save()`** del API Canvas 2D guarda el estado completo del canvas añadiendo el estado actual a una pila.

### El estado del dibujo

El estado del dibujo que se almacena en una pila consiste en los siguientes elementos:

* La matriz de transformación actual.
* La región de recorte actual.
* La lista de punteado actual.
* Los valores actuales de los siguientes atributos: `strokeStyle` (en-US), `fillStyle` (en-US), `globalAlpha` (en-US), `lineWidth` (en-US), `lineCap`, `lineJoin` (en-US), `miterLimit` (en-US), `lineDashOffset` (en-US), `shadowOffsetX` (en-US), `shadowOffsetY` (en-US), `shadowBlur` (en-US), `shadowColor` (en-US), `globalCompositeOperation`, `font` (en-US), `textAlign` (en-US), `textBaseline` (en-US), `direction` (en-US), `imageSmoothingEnabled` (en-US).
Sintaxis
--------
```

void ctx.save();
```

Ejemplos
--------

### Guardando el estado del dibujo

Este ejemplo usa el método `save()` para guardar el estado por defecto y el método `restore()` para restaurarlo luego, de tal manera que luego se puede dibujar el segundo rectángulo con el estado por defecto.

#### HTML


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


#### JavaScript


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

// Guardar el estado por defecto
ctx.save();

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);

// Restaurar el estado por defecto
ctx.restore();

ctx.fillRect(150, 40, 100, 100);
```


#### Resultado

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

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

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

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

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

* La interfaz donde se define este método: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.restore()` (en-US)
CanvasRenderingContext2D.clearRect()
====================================

El método **`CanvasRenderingContext2D.clearRect()`** del API Canvas 2D convierte todos los pixeles en el rectangulo definido por el punto de inicio (x, y) y tamaño *(width, height)* a negro transparente, borrando cualquier contenido dibujado anteriormente.

Syntaxis
--------

### HTML Content


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

### Parametros

**x**

El eje **x** de la coordenada para el punto de inicio del rectangulo.

y

El eje **y** de la coordenada para el punto de inicio del rectangulo.

width

El ancho del rectangulo.

heigth

el alto del rectangulo.

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

Un problema común con **`clearRect`** es que puede parecer que no funciona cuando no se usan las trayectorias de dibujo (paths) de forma adecuada. No olvide llamar `beginPath()` antes de comenzar a dibujar el nuevo cuadro después de llamar **`clearRect`**.

Ejemplos
--------

### Usando el método `clearRect`

Este es un simple fragmento (snippet) de código que usa el método **`clearRect`**.

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.lineTo(120, 120);
ctx.closePath(); // draws last line of the triangle
ctx.stroke();

ctx.clearRect(10, 10, 100, 100);

// clear the whole canvas
// ctx.clearRect(0, 0, canvas.width, canvas.height);
```


Edite el código de abajo y vea sus cambios actualizados 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:140px;">
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath(); // draws last line of the triangle
ctx.stroke();

ctx.clearRect(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-clearrect-dev |

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

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

Vea También
-----------

* The interface defining it, `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.fillRect()`
* `CanvasRenderingContext2D.strokeRect()` (en-US)
CanvasRenderingContext2D.getImageData()
=======================================

El método CanvasRenderingContext2D.getImageData() de la API de Canvas 2D devuelve un objeto ImageData que representa los datos de píxeles subyacentes para el área del lienzo denotada por el rectángulo que comienza en (sx, sy) y tiene un ancho de sw y una altura de sh. Este método no se ve afectado por la matriz de transformación de la lona.

Los píxeles fuera del área del lienzo están presentes como valores negros transparentes en los datos de imagen devueltos.

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

ImageData ctx.getImageData(sx, sy, sw, sh);
```

### Parámetros

`sx`

La coordenada 'x' de la esquina superior izquierda del rectángulo del que se extraerán los datos de imagen.

`sy`

La coordenada 'y' de la esquina superior izquierda del rectángulo del que se extraerá el ImageData.

`sw`

El ancho del rectángulo del que se extraerán los datos de la imagen.

`sh`

La altura del rectángulo del que se extraerán los datos de la imagen.

### Valor de retorno

An `ImageData` (en-US) object containing the image data for the given rectangle of the canvas.

### Errores cometidos

IndexSizeError

Lanzado si cualquiera de los argumentos de anchura o altura es cero.

Ejemplos
--------

### Usando el método getImageData

Esto es sólo un simple fragmento de código que utiliza el método getImageData. Para obtener más información, consulte Manipulación de píxeles con Canvas y el objeto ImageData.

#### HTML


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


#### JavaScript


```js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.rect(10, 10, 100, 100);
ctx.fill();

console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
```

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

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

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

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

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

* La interfaz que lo define, `CanvasRenderingContext2D`.
* `ImageData` (en-US)
* Manipulación de píxeles con Canvas
CanvasRenderingContext2D.lineCap
================================

La propiedad **`CanvasRenderingContext2D.lineCap`** del API Canvas 2D determina la forma usada para dibujar los puntos finales de las líneas.

**Nota:** La líneas se puede dibujar con los métodos `stroke()` (en-US), `strokeRect()` (en-US), y `strokeText()` (en-US).

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

ctx.lineCap = "butt" || "round" || "square";
```

### Opciones

`"butt"`

Los finales de las líneas son recortados. Valor por defecto.

`"round"`

Los finales de las líneas son redondeados.

`"square"`

Los finales de líneas son recortados al agregar un cuadrado de ancho y altura igual que el grosor de línea.

Ejemplos
--------

### Cambiando los finales de línea

En este ejemplo se redondean los puntos finales de una línea recta.

#### HTML


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


#### JavaScript


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

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineWidth = 15;
ctx.lineCap = "round";
ctx.lineTo(100, 100);
ctx.stroke();
```


#### Result

### Comparando los finales de línea

En este ejemplo se dibujan 3 líneas, cada una con un valor distinto de la propiedad `lineCap`. Se agregaron dos guías para resaltar las diferencias entre las tres líneas. Cada una de estas líneas empiezan y terminan en estas guías.

La línea de la izquiera usa la opción por defecto `"butt"`. Esta es dibujada completamente al ras de las líneas de guía. La segunda esta configurada para usar la opción `"round`. Esta agrega un semicírculo al final que tiene un radio de la mitad del grosor de línea. La línea de la derecha use la opción `"square"`. Esta agrega un cuadrado con ancho y altura de la mitad del grosor de línea.
```

<canvas id="canvas" width="150" height="150"></canvas>
```



```js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const lineCap = ["butt", "round", "square"];

// Draw guides
ctx.strokeStyle = "#09f";
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = "black";
for (let i = 0; i < lineCap.length; i++) {
  ctx.lineWidth = 15;
  ctx.lineCap = lineCap[i];
  ctx.beginPath();
  ctx.moveTo(25 + i \* 50, 10);
  ctx.lineTo(25 + i \* 50, 140);
  ctx.stroke();
}
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

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

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

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

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

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

* La interfaz que define esta propiedad: `CanvasRenderingContext2D`
* `CanvasRenderingContext2D.lineWidth` (en-US)
* `CanvasRenderingContext2D.lineJoin` (en-US)
* Aplicando estilos y color (en-US)
Location: reload()
==================

El metodo **`location.reload()`** carga de nuevo la URL actual, como lo hace el boton de Refresh de los navegadores.

La recarga puede estar bloqueada y arrojar un `SECURITY_ERROR` `DOMException` . Esto sucede si el origin (en-US) de la llamada `location.reload()` difiere del origen de la página que posee el objeto `Location`. Consulta Same-origin policy para mayor información.

Syntax
------
```

location.reload();
```

Ejemplo
-------

### HTML


```html
<button id="reload">Click para recargar</button>
```

### JavaScript


```js
const reload = document.getElementById("reload");

reload.addEventListener("click", (\_) => {
  // el \_ es para indicar la ausencia de parametros
  location.reload();
});
```

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

| Specification |
| --- |
| HTML Standard # dom-location-reload-dev |

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

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

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

* The `Location` interface it belongs to.
* Similar methods: `Location.assign()` (en-US) and `Location.replace()` (en-US).
Location: origin
================

La propiedad de sólo-lectura **`origin`** de la interfaz `Location` es una `USVString` (en-US) que contiene la serialización Unicode del origen de la URL que representa; que es:

* para una URL que usa `http` o `https`, el esquema seguido de `'://'`, seguido del dominio, seguido de `':'`, seguido del puerto (el puerto por defecto, `80` y `443` respectivamente, si se indica de forma explícita);
* para una URL que usa `file:` esquema, el valor es independiente del navegador;
* para una URL que usa `blob:` esquema, el origen de la URL seguido de `blob:`. Ej. `"blob:https://mozilla.org"` tendrá `"https://mozilla.org".`

**Nota:** Esta característica está disponible en Web Workers

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

string = object.origin;
```

Ejemplos
--------


```js
// En esta página, devuelve el origen
var result = window.location.origin; // Devuelve:'https://developer.mozilla.org'
```

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

| Specification |
| --- |
| HTML Standard # dom-location-origin-dev |

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

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

**Experimental:** **Esta es una tecnología experimental**  
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La propiedad **`ClipboardEvent.clipboardData`**, del tipo `DataTransfer` (en-US), puede ser usuada:

* Para especificar qué datos mover al portapapeles cuando se produzcan los eventos `cut` (en-US) y `copy` (en-US), normalmente a través de `setData(format, data)` (en-US);
* Para obtener la información del portapapeles a ser pegada cuando se produce el evento `paste` (en-US), normalmente a través de `getData(format)` (en-US).

Para más información, mira la documentación de los eventos `cut` (en-US), `copy` (en-US), y `paste` (en-US).

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

data = ClipboardEvent.clipboardData
```

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

| Specification |
| --- |
| Clipboard API and events # clipboardevent-clipboarddata |

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

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

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

* Otros eventos del portapapeles: `copy` (en-US), `cut` (en-US), `paste` (en-US)
* La interfaz base: `ClipboardEvent`.
Storage.removeItem()
====================

El método `removeItem()` de la interfaz `Storage` elimina la clave cuyo nombre recibe por parámetro del almacenamiento. La interfaz `Storage` de la API de almacenamiento web provee acceso al almacenamiento de la sesión (`sessionStorage`) o al almacenamiento local (`localStorage`).

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

storage.removeItem(keyName);
```

### Parámetros

***keyName***

Una `DOMString` que contiene el nombre de la clave que se desea eliminar.

### Devuelve

*Ningún valor.*

Ejemplos
--------

La siguiente función crea 3 elementos dentro del almacenamiento local y después elimina el elemento `image`.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.removeItem("image");
}
```


De la misma manera se podría manipular el almacenamiento de sesión:


```js
function populateSessionStorage() {
  sessionStorage.setItem("bgcolor", "red");
  sessionStorage.setItem("font", "Helvetica");
  sessionStorage.setItem("image", "myCat.png");

  sessionStorage.removeItem("image");
}
```


**Nota:** Para ver esto en un ejemplo real, vea nuestra Demo de Web Storage.

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

| Specification |
| --- |
| HTML Standard # dom-storage-removeitem-dev |

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

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

Vea también
-----------

Utilizando la API de Web Storage
Storage.getItem()
=================

El método `getItem()` de la interfaz `Storage` devuelve el valor de la clave cuyo nombre se le pasa por parámetro.

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

var aValue = storage.getItem(keyName);
```

### Parámetros

*`keyName`*

Una `DOMString` que contiene el nombre de la clave cuyo valor se quiere obtener.

### Devuelve

Una `DOMString` que contiene el valor de la clave. Si la clave no existe, devuelve `null`.

Ejemplo
-------

La siguiente función toma 3 elementos del almacenamiento local (local storage) y los utiliza para establecer estilos personalizados en una página.


```js
function setStyles() {
  var currentColor = localStorage.getItem("bgcolor");
  var currentFont = localStorage.getItem("font");
  var currentImage = localStorage.getItem("image");

  document.getElementById("bgcolor").value = currentColor;
  document.getElementById("font").value = currentFont;
  document.getElementById("image").value = currentImage;

  htmlElem.style.backgroundColor = "#" + currentColor;
  pElem.style.fontFamily = currentFont;
  imgElem.setAttribute("src", currentImage);
}
```


**Nota:** Para ver esto utilizado en un ejemplo real, vea nuestra Demo de Web Storage.

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

| Specification |
| --- |
| HTML Standard # dom-storage-getitem-dev |

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

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

Vea también
-----------

Utilizando la API de Web Storage
Storage.setItem()
=================

El método `setItem()` de la interfaz `Storage`, cuando reciba una clave y un valor, añadirá estos al almacén, o actualizará el valor si la clave ya existe.

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

storage.setItem(keyName, keyValue);
```

### Parámetros

*keyName*

Un `DOMString` conteniendo la clave que se quiere crear/actualizar.

*keyValue*

Un `DOMString` conteniendo el valor que se le quiere dar a la clave que se está creando/actualizando.

### Devuelve

*No devuelve valor.*

### Excepciones

`setItem()` puede lanzar una excepción si el almacén esta lleno. Particularmente, en Safari Mobile (desde iOS 5) siempre lo hará cuando el usuario ingresa en modo privado (Safari determina una cuota de 0 bytes en modo privado, al contrario de otros navegadores, que permiten almacenamiento en modo privado, usando contenedores de información separados).
 Por lo tanto, los desarrolladores deben asegurarse de **capturar siempre las posibles excepciones de `setItem()`**.

Ejemplo
-------

La siguiente función crea tres ítems dentro del almacenamiento local.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");
}
```


**Nota:** Para ver un ejemplo real, vea nuestro Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-setitem-dev |

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

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

Vea también
-----------

Usando la Web Storage API
Storage.length
==============

La propiedad de sólo lectura `length` de la interfaz `Storage` devuelve un entero que indica el numero de elementos guardados en el objeto`Storage`.

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

var aLength = storage.length;
```

### Valor devuelto

Entero

Ejemplo
-------

La siguiente función añade tres elementos de datos en el almacen local para el dominio actual, posteriormente, devuelve el número de elementos guardados en el almacen:


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "yellow");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "cats.png");

  localStorage.length; // should return 3
}
```


**Nota:** Para un ejemplo real, vea nuestro Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-length-dev |

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

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

Vea también
-----------

Uso de la Web Storage API
Storage.clear()
===============

El método `clear()` de la interfaz `Storage`, al invocarlo, elimina todos los registros del almacen local.

Sintaxis
--------


```js
storage.clear();
```

### Parámetros

*No recibe parámetros.*

### Devuelve

*No devuelve ningún valor.*

Ejemplo
-------

La siguiente función crea tres elementos con datos dentro del almacen local, seguidamente, los elimina usando `clear()`.


```js
function populateStorage() {
  localStorage.setItem("bgcolor", "red");
  localStorage.setItem("font", "Helvetica");
  localStorage.setItem("image", "myCat.png");

  localStorage.clear();
}
```


**Nota:** Para ver un ejemplo real, vea nuestro Web Storage Demo.

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

| Specification |
| --- |
| HTML Standard # dom-storage-clear-dev |

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

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

Vea también
-----------

Uso de la Web Storage API
IDBCursor.continue()
====================

El siguiente método de la `IDBCursor` interfaz, avanza el cursor hacia la siguiente posición a lo largo de su dirección, para el elemento cuya tecla marque la opción de una tecla parámetro. si ninguna tecla es especificada, el cursor avanzará hacia la siguiente posición, basado en su dirección actual.

**Nota:** Esta característica está disponible en Web Workers

Sintaxis
--------


```js
cursor.continue(optionalKey);
```

### Parámetros

*Tecla opcional*

La tecla para posisionar al cursor en.

### Excepciones

Este método puede plantear un`DOMException` con una `DOMError` de uno de los siguientes tipos:

`TransactionInactiveError`

Esta transacción en el Cursor IDB está inactiva.

`DataError`

El parámetro de una tecla podría tener una de las siguientes condiciones:

* La tecla no es una tecla valida.
* La tecla está más atrás o en el mismo sitio que la posición del cursor y además la dirección del cursor es la siguiente o la única siguiente.
* La tecla está más adelante o en el mismo sitio que la posición del cursor y además la dirección del cursor es previa o la única previa.

`InvalidStateError`

El cursor está siendo reiterado o se ha reiterado mas allá de su final.

Ejemplo
-------

En este simple fragmento nosotros creamos una transacción, recuperar un objeto del almacen, despues usamos un cursor para interactuar a traves de todos los registros en almacen de objetos. El cursor no requiere que nosotros seleccionemos los datos basados en una tecla; podemos tomarlo todo. También es importante resaltar que en cada interacción de la cadena, puedes tomar datos desde el registro actual debajo del objeto del cursor usando ```cursor.value.foo`. Para dar un ejemplo completo, puedes mirar nuestra IDBCursor example (view example live.)
```

function displayData() {
  var transaction = db.transaction(['rushAlbumList'], "readonly");
  var objectStore = transaction.objectStore('rushAlbumList');

  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if(cursor) {
      var listItem = document.createElement('li');
      listItem.innerHTML = cursor.value.albumTitle + ', ' + cursor.value.year;
      list.appendChild(listItem);

      cursor.continue();
    } else {
      console.log('Entries all displayed.');
    }
  };
};
```

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

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbcursor-continue① |

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

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

Te puede interesar
------------------

* Using IndexedDB
* Starting transactions: `IDBDatabase`
* Using transactions: `IDBTransaction` (en-US)
* Setting a range of keys: `IDBKeyRange` (en-US)
* Retrieving and making changes to your data: `IDBObjectStore`
* Using cursors: `IDBCursor`
* Reference example: To-do Notifications (view example live.)