recursal/MDN huggingface dataset:
Les textures vidéos
===================

* « Précédent

Cet exemple illustre comment utiliser des fichiers vidéos comme textures.

### Des textures à partir de vidéos

* « Précédent
Tailles de canvas et WebGL
==========================

* « Précédent
* Suivant »

Dans cet exemple, on observe l'effet obtenu quand on définit (ou non) la taille du canevas HTML avec sa taille CSS (exprimée en pixels CSS), tel qu'il apparaît dans la fenêtre du navigateur.

### Les effets liés à la taille du canevas sur le rendu avec WebGL

Grâce aux méthodes `scissor()` (en-US) et `clear()` on peut démontrer que le tampon (*buffer*) de dessin WebGL est affecté par la taille du canevas (l'élément HTML `canvas`).

La taille du premier canevas est définie avec la taille de l'élément, mis en forme, qui est déterminée par CSS. Pour cela, on affecte respectivement les valeurs `clientWidth` and `clientHeight` aux propriétés `width` (en-US) et `height`.

Pour le deuxième canevas, on n'applique pas ce traitement, c'est donc les dimensions internes du canevas : `width` (en-US) et `height` qui sont prises en compte. Celles-ci sont différentes des dimensions de l'élément `canvas` affiché dans le fenêtre du navigateur.

L'effet devient visible quand on utilise les méthodes `scissor()` (en-US) et `clear()` pour dessiner un carré au centre du canevas en définissant sa position et sa taille en pixels. Dans le premier canevas, on obtient bien le bon résultat et dans le deuxième, on a la mauvaise forme, la mauvaise taille et la mauvaise position.


```html
<p>On compare les deux canevas.</p>
<canvas
 >Votre navigateur ne semble pas supporter l'élément HTML5 canvas.</canvas
>
<canvas
 >Votre navigateur ne semble pas supporter l'élément HTML5 canvas.</canvas
>
```



```css
body {
  text-align: center;
}
canvas {
  width: 120px;
  height: 80px;
  margin: auto;
  padding: 0;
  border: none;
  background-color: black;
}
```



```js
window.addEventListener(
  "load",
  function () {
    "use strict";
    var firstCanvas = document.getElementsByTagName("canvas")[0],
      secondCanvas = document.getElementsByTagName("canvas")[1];

    // Ici on applique le traitement spécifique au premier
    // canevas
    firstCanvas.width = firstCanvas.clientWidth;
    firstCanvas.height = firstCanvas.clientHeight;

    // Ensuite on traite les deux canevas de la même façon
    [firstCanvas, secondCanvas].forEach(function (canvas) {
      var gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
      if (!gl) {
        document.querySelector("p").innerHTML =
          "Échec de l'obtention du contexte WebGL. " +
          "Votre navigateur peut ne pas supporter WebGL.";
        return;
      }
      gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
      gl.enable(gl.SCISSOR\_TEST);
      gl.scissor(30, 10, 60, 60);
      gl.clearColor(1.0, 1.0, 0.0, 1.0);
      gl.clear(gl.COLOR\_BUFFER\_BIT);
    });
  },
  false,
);
```


Le code source de cet exemple est également disponible sur GitHub.

* « Précédent
* Suivant »
Détecter WebGL
==============

* « Précédent
* Suivant »

Dans cet exemple, on voit comment détecter un contexte de rendu WebGL et afficher le résultat à l'utilisateur.

### Détecter le support WebGL

Dans ce premier exemple, on vérifie si le navigateur prend en charge WebGL. Pour cela, on essaye d'obtenir le contexte de rendu WebGL à partir d'un élément `canvas`. Le contexte de rendu WebGL est une interface qui permet de connaître et de modifier l'état du moteur graphique WebGL, d'envoyer des données à WebGL et d'exécuter des commandes de dessin.

La gestion d'une machine graphique au sein d'une seule interface n'est pas propre à WebGL. Les autres {̣{Glossary("API")}} graphiques comme le contexte de rendu 2D du canevas. Cependant, les propriétés et variables qui peuvent être manipulées changent d'une API à l'autre.


```html
<p>[ On affichera ici le résultat de la détection du support WebGL ]</p>
<button>Cliquez ici pour détecter WebGLRenderingContext</button>
```



```css
body {
  text-align: center;
}
button {
  display: block;
  font-size: inherit;
  margin: auto;
  padding: 0.6em;
}
```



```js
// On exécute tout dans le gestionnaire d'événement
// correspondant au chargement de la fenêtre. De cette
// façon, le DOM est complètement chargé et mis en forme
// avant de le manipuler.
window.addEventListener(
  "load",
  function () {
    var paragraph = document.querySelector("p"),
      button = document.querySelector("button");

    // On ajoute un gestionnaire d'événement pour
    // le clic sur le bouton
    button.addEventListener("click", detectWebGLContext, false);
    function detectWebGLContext() {
      // On crée un élément canvas. Le canvas n'est pas
      // ajouté au document et il n'est donc jamais
      // affiché dans la fenêtre du navigateur
      var canvas = document.createElement("canvas");

      // On récupère le contexte WebGLRenderingContext
      // depuis l'élément canvas.
      var gl =
        canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

      // On affiche le résultat.
      if (gl && gl instanceof WebGLRenderingContext) {
        paragraph.innerHTML = "Félicitations, votre navigateur supporte WebGL.";
      } else {
        paragraph.innerHTML =
          "Échec du contexte WebGL. " +
          "Votre navigateur peut ne pas supporter WebGL.";
      }
    }
  },
  false,
);
```


Le code source de cet exemple est également disponible sur GitHub.

* « Précédent
* Suivant »
Animer des objets avec WebGL
============================

* « Précédent
* Suivant »

Dans cet exemple, nous allons faire tourner notre carré 2D.

Faire tourner le carré
----------------------

Commençons par faire tourner le carré. La première chose dont nous avons besoin est une variable pour mémoriser la rotation courante du carré :


```js
var squareRotation = 0.0;
```


Maintenant, nous devons modifier la fonction `drawScene()` pour appliquer la rotation courante du carré quand on le dessine. Après déplacement à la position de dessin initiale du carré, nous appliquons la rotation comme suit :


```js
mat4.rotate(
  modelViewMatrix, // matrice de destination
  modelViewMatrix, // matrice de rotation
  squareRotation, // rotation en radians
  [0, 0, 1],
); // axe autour duquel tourner
```


Ceci fait tourner la modelViewMatrix de la valeur courante de `squareRotation`, autour de l'axe Z.

Pour réaliser effectivement l'animation, nous avons besoin d'ajouter du code qui change la valeur de `squareRotation` au fil du temps. Nous pouvons faire cela en créant une nouvelle variable pour mémoriser l'instant auquel nous avons réalisé l'animation pour la dernière fois (appelons le `then`), puis en ajoutant le code suivant à la fin de la fonction principale :


```js
var then = 0;

// Dessiner la scène répétitivement
function render(now) {
  now \*= 0.001; // conversion en secondes
  const deltaTime = now - then;
  then = now;

  drawScene(gl, programInfo, buffers, deltaTime);

  requestAnimationFrame(render);
}
requestAnimationFrame(render);
```


Ce code utilise `requestAnimationFrame` pour demander au navigateur d'appeler la fonction "`render`" à chaque image. `requestAnimationFrame` nous transmet le temps en millisecondes depuis le chargement de la page. Nous le convertissons en secondes, puis nous lui soustrayons le dernier instant pour calculer `deltaTime`, qui est le nombre de secondes depuis le rendu de la dernière image. À la fin de drawscene, nous ajoutons le code pour mettre à jour `squareRotation`.


```js
squareRotation += deltaTime;
```


Ce code utilise le laps de temps qui s'est écoulé depuis la dernière fois que nous avons mis à jour la valeur `squareRotation` pour déterminer de combien faire tourner le carré.

Voir le code complet | Ouvrir cette démo dans une nouvelle page

* « Précédent
* Suivant »
StorageManager.persist()
========================

**Contexte sécurisé:** Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La méthode **`persist()`** de l'interface `StorageManager` (en-US) fait une demande de permission d'utiliser un stockage persistant, et renvoie une `Promise` qui se résoud en `true` si la permission est accordée et le mode de boîte est persistant, et `false` dans le cas contraire.

Syntaxe
-------


```js
navigator.storage.persist().then(function(persistent) { ... })
```

### Paramètres

Aucun.

### Valeur de retour

Une `Promise` qui se résoud en un `Boolean`.

Exemple
-------


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persist().then(function (persistent) {
    if (persistent)
      console.log(
        "Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite",
      );
    else
      console.log(
        "Le stockage peut être nettoyé par l’UA en cas de pression de stockage.",
      );
  });
```

Spécifications
--------------

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-persist |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StorageManager.persisted()
==========================

**Contexte sécurisé:** Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

**Expérimental:** **Cette fonction est expérimentale**  
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.  
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété **`persisted`** de l'interface `StorageManager` (en-US) renvoie une `Promise` qui se résoud en `true` si le mode de boîte est est persistant pour le stockage de votre site.

Syntaxe
-------


```js
navigator.storage.persisted().then(function(persistent) { ... })
```

### Paramètres

Aucun.

### Valeur de retour

Une `Promise` qui se résoud en un `Boolean`.

Example
-------


```js
if (navigator.storage && navigator.storage.persist)
  navigator.storage.persisted().then(function (persistent) {
    if (persistent)
      console.log(
        "Le stockage ne sera pas nettoyé sauf en cas d’action humaine explicite",
      );
    else
      console.log(
        "Le stockage peut être nettoyé par l’UA en cas de pression de stockage.",
      );
  });
```

Spécifications
--------------

| Specification |
| --- |
| Storage Standard # dom-storagemanager-persisted |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
StorageManager.estimate()
=========================

**Contexte sécurisé:** Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.

La méthode **`estimate()`**, rattachée à l'interface `StorageManager` (en-US), demande au gestionnaire de stockage l'espace occupé (`usage`) et l'espace disponible (`quota`) pour l'origine courante.

Cette méthode est asynchrone est renvoie une promesse qui est résolue lorsque l'information est disponible. Le gestionnaire de réussite de la promesse est appelé avec un objet contenant les données pour l'usage actuel et le quota restant.

Syntaxe
-------


```js
estimate();
```

### Paramètres

Aucun.

### Valeur de retour

Une promesse (un objet `Promise`) qui est résolue avec un objet doté des propriétés suivantes :

`quota`

Une valeur numérique, exprimée en octets, qui fournit une approximation prudente de l'espace de stockage disponible sur l'appareil ou l'ordinateur de la personne pour cette origine ou cette application web. Il est possible que davantage d'espace soit disponible, mais ce n'est pas nécessairement le cas.

`usage`

Une valeur numérique, exprimée en octets, qui fournit une approximation de l'espace de stockage actuellement utilisé par le site ou l'application, par rapport à l'espace total disponible indiqué par `quota`.

`usageDetails` 
Non-standard

Un objet contenant une décomposition de `usage` par système de stockage. Toutes les propriétés incluses sur cet objet auront un `usage` supérieur à 0 et tout système de stockage avec `usage` à 0 ne sera pas fourni comme propriété de cet objet.


**Note :** Les valeurs renvoyées ne sont pas précisément exactes. Cela est lié à la compression, la déduplication de données et au masquage des informations pour des raisons de sécurité.

Vous pourrez observer que `quota` varie en fonction des origines. Cette variation est basée sur plusieurs facteurs dont :

* La fréquence de visite du site
* Les données publiques quant à la popularité du site
* Les signaux d'engagement fournis par la personne comme la mise en favori, l'inscription à l'écran d'accueil, ou l'acceptation des notifications *push*.
Exemples
--------

Dans cet exemple, on récupère les estimations de l'espace utilisé et du quota total afin de présenter un pourcentage de l'espace actuellement occupé sur la page.

### HTML


```html
<label>
  Vous utilisez actuellement <output id="percent"> </output>% du stockage
  disponible.
</label>
```

### JavaScript


```js
navigator.storage.estimate().then(function (estimate) {
  document.getElementById("percent").value = (
    (estimate.usage / estimate.quota) \*
    100
  ).toFixed(2);
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| Storage Standard # ref-for-dom-storagemanager-estimate |

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* L'API Storage
* `Storage`, l'objet renvoyé par `Window.localStorage`
* `StorageManager` (en-US)
* `navigator.storage`
HTMLElement.blur()
==================

La méthode **`HTMLElement.blur()`** retire le focus du clavier de l'élément courant.

Syntaxe
-------


```js
blur();
```

Exemples
--------

### Retirer le focus d'un champ texte

#### HTML


```html
<input type="text" id="monTexte" value="Texte d'échantillon" /> <br /><br />
<button type="button" onclick="focusInput()">
  Cliquez ici pour obtenir le focus
</button>
<button type="button" onclick="blurInput()">
  Cliquez ici pour perdre le focus
</button>
```


#### JavaScript


```js
function focusInput() {
  document.getElementById("monTexte").focus();
}
function blurInput() {
  document.getElementById("monTexte").blur();
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| HTML Standard # dom-blur-dev |

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* `HTMLElement.focus`
element.offsetWidth
===================

### Résumé

Renvoie la largeur totale d'un élément.

### Syntaxe


```js
var offsetWidth = element.offsetWidth;
```


`offsetWidth` est une propriété en lecture seule.

### Description

Typiquement, l'attribut `offsetWidth` est une mesure qui comprend les bordures de l'élément, ses marges internes horizontales (padding), la barre de défilement verticale si présente et affichée, et la largeur CSS de l'élément.

Exemple
-------

![](/fr/docs/Web/API/HTMLElement/offsetWidth/dimensions-offset.png)

### Spécification

`offsetWidth` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

### Notes

`offsetWidth` est une propriété du modèle objet DHTML provenant de Microsoft Internet Explorer. On l'appelle parfois la largeur physique ou graphique d'un élément, ou sa largeur « border-box » (bordure et boîte).

### Références

* *offsetWidth definition* sur MSDN
* *Measuring Element Dimension and Location* sur MSDN
HTMLElement.outerText
=====================

**Non standard:** Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.

Résumé
------

**`HTMLElement.outerText`** n'est pas une propriété standard. En lecture, elle renvoie la même valeur que `Node.innerText`. En écriture, elle supprime le noeud courant et le remplace par le texte fourni.

Exemple
-------

Voir cette réponse proposée sur StackOverflow.

Spécification
-------------

Ne fait partie d'aucune spécification. Discussion de la norme : whatwg/html#668.

Microsoft en a publié une description sur MSDN.

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* `Node.innerText`
* `Element.outerHTML`
Element.accessKey
=================

La propriété **Element.accessKey** définit la touche sur laquelle l'utilisateur doit appuyer pour accéder à l'élément.

**Note :** La propriété `Element.accessKey` est rarement utilisée en raison de ses multiples conflits avec des raccourcis clavier déjà présents dans les navigateurs. Pour contourner ce problème, les navigateurs appliquent le comportement attendu de "accesskey" lorsqu'une autre touche est pressée simultanément (comme `Alt` + accesskey).
element.offsetLeft
==================

### Résumé

 Renvoie le nombre de pixels dont le
 *coin supérieur gauche*
 de l'élément courant est décalé vers la gauche au sein du nœud `offsetParent`.

### Syntaxe


```js
left = element.offsetLeft;
```


`left` est un entier représentant le décalage vers la gauche en pixels.

### Note

`offsetLeft` renvoie la position du coin supérieur gauche de l'élément ; pas nécessairement du « vrai » bord gauche de l'élément. C'est important pour les éléments **span** dans les textes continus qui s'étendent sur plusieurs lignes. Le span peut commencer au milieu de la page et continuer au début de la ligne suivante. La propriété `offsetLeft` fera référence au coin gauche de départ du span, pas le bord gauche du texte au début de la seconde ligne. Par conséquent, une boîte avec les valeurs left, top, width et height correspondant à `offsetLeft, offsetTop, offsetWidth` et `offsetHeight` ne contiendra pas forcément un span avec débordement de texte.

### Exemple


```js
var colorTable = document.getElementById("t1");
var tOLeft = colorTable.offsetLeft;

if (tOLeft > 5) {
  // grand décalage à gauche&nbsp;: faire quelque chose ici
}
```


Comme noté plus haut, cet exemple montre une « longue » phrase qui déborde dans un div avec une bordure bleue, et une boîte rouge dont on pourrait croire qu'elle décrit les limites du span.

![](/fr/docs/Web/API/HTMLElement/offsetLeft/offsetleft.jpg)

Note : il s'agit d'une image de l'exemple, pas d'un rendu direct dans le navigateur. En effet, il n'est pas possible d'intégrer des scripts dans la page du wiki.


```html
<div
 style="width: 300px; border-color:blue;
 border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">Long span that wraps withing this div.</span>
</div>

<div
 id="box"
 style="position: absolute; border-color: red;
 border-width: 1; border-style: solid; z-index: 10"></div>

<script>
 var box = document.getElementById("box");
 var long = document.getElementById("long");
 box.style.left = long.offsetLeft + document.body.scrollLeft;
 box.style.top = long.offsetTop + document.body.scrollTop;
 box.style.width = long.offsetWidth;
 box.style.height = long.offsetHeight;
</script>
```

### Voir aussi

`offsetParent`, `offsetTop`, `offsetWidth`, `offsetHeight`

### Spécification

Cette propriété ne fait partie d'aucun standard ou recommandation technique du W3C.

MSDN: offsetLeft
element.offsetHeight
====================

### Résumé

Propriété DHTML permettant d'obtenir la hauteur d'un élément par rapport à la mise en page.

### Syntaxe


```js
var hauteurTotaleElem = document.getElementById(id).offsetHeight;
```


*hauteurTotalElem* est une variable stockant un entier correspondant à la valeur en pixels de la hauteur totale de l'élément identifé par `id`. `offsetHeight` est une propriété en lecture seule.

### Description

Typiquement, la propriété **offsetHeight** d'un élément est une mesure qui comprend les bordures de l'élément, ses marges internes verticales (padding), la barre de défilement horizontale si présente et affichée, et la hauteur CSS de l'élément.

### Exemple

Example
-------

![](/fr/docs/Web/API/HTMLElement/offsetHeight/dimensions-offset.png)

L'exemple d'image ci-avant montre une barre de défilement et un décalage `offsetHeight` qui rentre dans la fenêtre. Toutefois, les éléments non-défilables peuvent avoir des valeurs `offsetHeight` élevées, voire plus élevéesque le contenu visible. Ces éléments sont généralement contenu au sein d'éléments défilables et, de fait, les éléments non-défilables peuvent être partiellement ou complètement invisible, selon la valeur de `scrollTop` pour le conteneur.

### Spécification

`offsetHeight` fait partie du modèle objet DHTML de Microsoft Internet Explorer. Elle ne fait partie d'aucune spécification ou recommandation technique du W3C.

### Notes

`offsetHeight` est une propriété du modèle objet DHTML introduite par Microsoft Internet Explorer. On l'appelle parfois la hauteur physique ou graphique d'un élément, ou sa hauteur « border-box » (bordure et boîte).

### Références

* *offsetHeight definition* sur MSDN
* *Measuring Element Dimension and Location* sur MSDN
### Voir aussi

* `element.clientHeight`
* `element.scrollHeight`
* `element.offsetWidth`
Element : évènement error
=========================

L'évènement `error` est déclenché sur un objet `Element` lorsque le chargement d'une ressource a échoué ou qu'elle ne peut pas être utilisée. Cela peut, par exemple, se produire lors d'une erreur d'exécution d'un script ou lorsqu'une image ne peut être trouvée ou si elle est invalide.

|  |  |
| --- | --- |
| Bouillonnement | Non |
| Annulable | Non |
| Interface | `Event` ou `UIEvent` |
| Propriété pour la gestion d'évènement | `onerror` |

L'objet évènement obtenu est une instance `UIEvent` s'il a été généré depuis un élément de l'interface utilisateur ou une instance `Event` sinon.

Exemples
--------

### HTML


```html
<div class="controls">
  <button id="img-error" type="button">Générer une erreur d'image</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label>Journal d'évènements :</label>
  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
</div>
```


```
body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}
```

### JS


```js
const log = document.querySelector(".event-log-contents");

const badImg = document.querySelector(".bad-img");
badImg.addEventListener("error", (event) => {
  log.textContent = log.textContent + `${event.type}: Chargement de l'image\n`;
  console.log(event);
});

const imgError = document.querySelector("#img-error");
imgError.addEventListener("click", () => {
  badImg.setAttribute("src", "i-dont-exist");
});
```

### Résultat

Spécifications
--------------

| Specification |
| --- |
| UI Events # event-type-error |

Compatibilité des navigateurs
-----------------------------

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

Voir aussi
----------

* L'évènement correspondant pour les cibles `Window` : `error`