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

**`<canvas>`** est un nouvel élément HTML qui peut être utilisé pour dessiner des éléments graphiques à l'aide de scripts (habituellement JavaScript). Il permet par exemple de dessiner des graphiques, de réaliser des compositions de photographies ou des animations simples (voire pas si simples). Les images à droite montrent quelques exemples d'implémentations utilisant `<canvas>` que nous verrons plus tard dans ce tutoriel.

Ce tutoriel explique comment utiliser l'élément `<canvas>` pour dessiner des graphiques 2D, en commençant par les bases. Les exemples fournis devraient vous donner des idées claires sur ce que vous pouvez faire avec la toile et fournir des extraits de code qui peuvent vous aider à créer votre propre contenu.

D'abord introduit dans WebKit par Apple pour le tableau de bord OS X, `<canvas>` a depuis été implémenté dans les navigateurs. Aujourd'hui, tous les principaux navigateurs le prennent en charge.

Avant de commencer
------------------

L'utilisation de l'élément `<canvas>` n'a rien de très compliqué, mais nécessite tout de même une compréhension de base de HTML et JavaScript. L'élément `<canvas>` n'est pas reconnu par tous les vieux navigateurs, mais il est supporté par les versions les plus récentes des principaux. La taille par défaut de canvas est 300 px × 150 px (largeur × hauteur). Mais les tailles personnalisées peuvent être définies à l'aide des propriétés HTML `height` et `width`. Afin de dessiner des graphiques sur canvas , nous utilisons un objet de contexte JavaScript, qui crée des graphiques à la volée.

Dans ce tutoriel
----------------

* Utilisation de base
* Dessin de formes géométriques
* Ajout de styles et de couleurs
* Dessin de texte
* Utilisation d'images
* Transformations
* Compositions et découpage
* Animations basiques
* Animations avancées
* Manipulation des pixels
* Régions touchées et accessibilité
* Optimisation
* Final (en-US)
Voir aussi
----------

* Page du sujet canvas
* HTML5CanvasTutorials (en)
* Suivant »
Response.ok
===========

La propriété en lecture seule **`ok`** de l'interface `Response` contient un booléen correspondant au succès (codes de statut compris entre 200 et 299) ou à l'échec de la réponse.

Syntaxe
-------


```js
var myOK = response.ok;
```

### Valeur

Un `Boolean` (en-US).

Exemple
-------

Dans notre exemple (voir la démonstration en ligne) nous créons un nouvel objet `Request` en utilisant le constructeur `Request()` avec le chemin vers un JPG en argument. On récupère (*fetch* en anglais) ensuite la requête en utilisant `GlobalFetch.fetch()`, on extrait un *blob* de la réponse en utilisant `Body.blob` (en-US) pour créer un objet URL grâce à `URL.createObjectURL` et l'afficher dans une balise `<img>`.

**Note :** Nous affichons la valeur de la propriété `ok` de la réponse dans la console en haut du bloc `fetch()`.


```js
var myImage = document.querySelector("img");

var myRequest = new Request("flowers.jpg");

fetch(myRequest).then(function (response) {
  console.log(response.ok); // retourne true si la réponse est retournée avec succès
  response.blob().then(function (myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });
});
```

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

| Specification |
| --- |
| Fetch Standard # ref-for-dom-response-ok② |

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

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

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

* API ServiceWorker
* Contrôle d'accès HTTP (CORS)
* HTTP
EventSource.close()
===================

La fonction **`close()`** de l'interface `EventSource` coupe la connection, si existante, et affecte à la variable `EventSource.readyState` (en-US) la valeur `2` (closed).

**Note :** Si la connexion est déjà fermé, la fonction n'agit pas.

Syntaxe
-------


```js
eventSource.close();
```

### Paramètres

Aucun.

### Valeur de retour

Nulle.

Exemples
--------


```js
var bouton = document.querySelector("button");
var evtSource = new EventSource("sse.php");

bouton.onclick = function () {
  console.log("Connection fermée");
  evtSource.close();
};
```


**Note :** Vous pouvez trouver un exemple complet sur GitHub — voir Demo simple de SSE utilisant PHP.

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

| Specification |
| --- |
| HTML Standard # dom-eventsource-close-dev |

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

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

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

* `EventSource`
EventSource.onopen
==================

La propriété **`onopen`** de l'interface `EventSource` est un gestionnaire d'évènement qui est appelé lorsqu'un est évènement `open` est reçu, indiquant que la connexion vient d'être établie.

Syntaxe
-------


```js
eventSource.onopen = function
```

Exemples
--------


```js
evtSource.onopen = function () {
  console.log("Connexion au serveur établie.");
};
```


**Note :** Vous pouvez trouver un exemple complet sur GitHub — voir Simple SSE demo using PHP.

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

| Specification |
| --- |
| HTML Standard # event-open |
| HTML Standard # handler-eventsource-onopen |

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

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

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

* `EventSource`
MediaSource.MediaSource()
=========================

**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.

Le constructeur **`MediaSource()`** de l'interface `MediaSource` construit et retourne un nouvel object `MediaSource` sans buffer associé

Syntaxe
-------


```js
var mediaSource = new MediaSource();
```

### Paramèteres

Aucun.

Example
-------

Le fragement de code suivant est tiré d'un exemple simple écrit par par Nick Desaulniers (voir la démonstration complète, ou télécharger les sources pour une meilleure compréhention.)


```js
var video = document.querySelector('video');

var assetURL = 'frag\_bunny.mp4';
// A besoin d'être spécifique, Blink (moteur de rendu Chrome) demande le codec
// ./mp4info frag\_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
  var mediaSource = new MediaSource;
  //console.log(mediaSource.readyState); // "closed"
  video.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.error('Unsupported MIME type or codec: ', mimeCodec);
}

...
```

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

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

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

* `SourceBuffer` (en-US)
* `SourceBufferList` (en-US)
HTMLCanvasElement.height
========================

La propriété **`HTMLCanvasElement.height`** est un entier positif reflétant l'attribut HTML `height` de l'élément `<canvas>` mesuré en pixels CSS. Quand cet attribut n'est pas spécifié, ou si on lui affecte une valeur invalide, telle que négative, la valeur par défaut de `150` is utilisée.

C'est l'une des deux propriétés, l'autre étant `HTMLCanvasElement.width` (en-US), qui contrôlent la taille du canevas.

Syntaxe
-------


```js
var pxl = canvas.height;
canvas.height = pxl;
```

Exemples
--------

Étant donné cet élément `<canvas>` :


```html
<canvas id="canvas" width="300" height="300"></canvas>
```


vous pouvez obtenir la hauteur du canevas avec le code suivant :


```js
var canvas = document.getElementById("canvas");
console.log(canvas.height); // 300
```

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

| Specification |
| --- |
| HTML Standard # dom-canvas-height |

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

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

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

* L'interface la définissant, `HTMLCanvasElement`.
* L'autre propriété contrôlant la taille du canevas, `HTMLCanvasElement.width` (en-US).
DeviceOrientationEvent.absolute
===============================

Cette propriété indique si l'appareil fournit des données d'orientation dans un repère absolu (utilisant les coordonnées par rapport à la Terre) ou s'il utilise un repère arbitraire propre. Voir le guide sur les données d'orientation et de déplacement pour plus de détails.

Syntaxe
-------


```js
let absolute = instanceOfDeviceOrientationEvent.absolute;
```


*`absolute`* vaut `true` si les données d'orientation fournies par l'évènement `instanceOfDeviceOrientationEvent` sont fournies comme la différence entre l'orientation de l'appareil et celle du repère terrestre ou `false` si les données d'orientation sont fournies relativement à un repère arbitraire fixé par l'appareil.

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

| Specification |
| --- |
| DeviceOrientation Event Specification # ref-for-dom-deviceorientationevent-absolute |

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

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

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

* `DeviceOrientationEvent`
* Détecter l'orientation d'un appareil (en-US)
* Guide sur les données d'orientation et de déplacement
* L'évènement `window.ondeviceorientation` (en-US)
* `deviceorientation`
Event.type
==========

La propriété en lecture seule **Event.type** retourne une chaîne de caractères (*string*) contenant le type de l'événement. Le type est défini lors de la construction de l'événement et est le nom d'usage pour se référer à celui-ci, tel que `click`, `load` ou `error`.

L'argument `event` de `EventTarget.addEventListener()` et `EventTarget.removeEventListener()` n'est pas sensible à la casse.

Pour une liste des types d'événements disponibles, aller voir la page Référence des évènements.

Syntaxe
-------


```js
event.type;
```

Exemples
--------


```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <title>Event.type Example</title>

    <script>
 var currEvent;
 function getEvtType(evt) {
 console.group();

 currEvent = evt.type;
 console.log(currEvent);

 document.getElementById("Etype").innerHTML = currEvent;

 console.groupEnd();
 }

 //Évènements du clavier
 document.addEventListener("keypress", getEvtType, false); //[second]

 document.addEventListener("keydown", getEvtType, false); //premier
 document.addEventListener("keyup", getEvtType, false); //troisième

 //Évènements de la souris
 document.addEventListener("click", getEvtType, false); // troisième

 document.addEventListener("mousedown", getEvtType, false); //premier
 document.addEventListener("mouseup", getEvtType, false); //second
 </script>
  </head>

  <body>
    <p>Press any key or click the mouse to get the event type.</p>
    <p>Event type: <span id="Etype" style="color:red">-</span></p>
  </body>
</html>
```

### Résultat

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-type④ |

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

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

La méthode **`stopImmediatePropagation()`**, rattachée à l'interface `Event`, empêche les gestionnaires d'évènement, associés à ce même évènement, d'être appelés.

Si plusieurs gestionnaires d'évènement sont attachés à un élément pour le même type d'évènement, ils sont appelés dans l'ordre dans lequel ils ont été ajoutés. Si `stopImmediatePropagation()` est appelé pendant un de ces appels, les gestionnaires restants ne sont pas invoqués.

Syntaxe
-------


```js
event.stopImmediatePropagation();
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stopimmediatepropagation① |

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

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

Évite que l'évènement courant ne se propage plus loin dans les phases de capture et de déploiement.

Syntaxe
-------


```js
event.stopPropagation();
```

Exemple
-------

Voir la section Exemple 5 : Propagation d'évènements dans le chapitre Exemples pour un exemple plus détaillé de cette méthode et de la propagation d'évènements dans le DOM.

Notes
-----

Voir DOM specification (en) pour une explication du flux d'évènements. (Une illustration est disponible dans le brouillon DOM Level 3 Event draft (en)).

preventDefault est une méthode complémentaire qui peut être utilisée pour empêcher l'action par défaut de l'évènement.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-stoppropagation① |

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

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

Retourne le temps (en millisecondes) à partir duquel l'événement a été créé.

**Note :** Cette propriété fonctionne seulement si le système d'évènements le prend en charge pour des évènements particuliers.

Syntaxe
-------


```js
event.timeStamp;
```

### Valeur

Cette valeur est un nombre de millisecondes écoulées depuis le début du temps de vie du document courant jusqu'à la création de l'évènement.

Dans les nouvelles implémentations, la valeur est un `DOMHighResTimeStamp` dont la précision est de 5 microsecondes (0,005 ms). Dans les implémentations plus anciennes, la valeur est un `DOMTimeStamp` de précision d'une milliseconde.

Exemple
-------

### HTML


```html
<p>
  Focus this iframe and press any key to get the current timestamp for the
  keypress event.
</p>
<p>timeStamp: <span id="time">-</span></p>
```

### JavaScript


```js
function getTime(event) {
  var time = document.getElementById("time");
  time.firstChild.nodeValue = event.timeStamp;
}
document.body.addEventListener("keypress", getTime);
```

### Résultat

Précision du temps réduite
--------------------------

 Pour offrir une protection contre les attaques de synchronisation et les empreintes digitales, la précision de `event.timeStamp` peut être arrondie en fonction des paramètres du navigateur.
 Dans Firefox, la préférence `privacy.reduceTimerPrecision` est activée et à 20 us par défaut dans Firefox 59 ; en version 60 ce sera 2 ms.


```js
// Précision du temps réduite (2ms) dans Firefox 60
event.timeStamp;
// 1519211809934
// 1519211810362
// 1519211811670
// ...

// Précision du temps réduite avec `privacy.resistFingerprinting` activé
event.timeStamp;
// 1519129853500
// 1519129858900
// 1519129864400
// ...
```


Dans Firefox, vous pouvez aussi activer `privacy.resistFingerprinting`, la précision sera de 100 ms ou la valeur de `privacy.resistFingerprinting.reduceTimerPrecision.microseconds`, selon la valeur la plus grande.

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-timestamp① |

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

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

**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.

La propriété en lecture seule **`explicitOriginalTarget`**, rattachée à l'interface `Event`, renvoie la cible originale, non-anonyme, de l'évènement.

Si l'évènement a été reciblé pour une autre raison que le franchissement de limites anonyme, cette propriété sera définie avec la cible avant le reciblage.

Par exemple, les évènements de souris sont reciblés sur les nœuds parent lorsqu'ils se produisent sur des nœuds texte (voir le bug 185889), et, dans ce cas, `currentTarget` affichera le parent tandis que cette propriété affichera le nœud texte.

Cette propriété diffère également de `originalTarget`, car elle ne contiendra jamais de contenu anonyme.

Valeur
------

Renvoie l'objet `EventTarget` ou `null` s'il n'y en a pas.

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

Il s'agit d'une propriété spécifique à Mozilla qui ne fait partie d'aucune spécification actuelle et qui n'est pas en voie de standardisation.

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

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

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

* Comparaison des cibles d'évènements
Event.isTrusted
===============

La propriété en lecture seule isTrusted, de l'interface `Event`, est un booléen qui vaut true lorsque l'événement est généré par une action de l'utilisateur, et false, quand l'événement est créé ou modifié par un script ou envoyé par dispatchEvent.

Syntaxe
-------


```js
var bool = event.isTrusted;
```

Exemple
-------


```js
if (e.isTrusted) {
  /\* The event is trusted. \*/
} else {
  /\* The event is not trusted. \*/
}
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-istrusted① |

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

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

**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.

**Obsolète:** Cette fonctionnalité a été supprimée des standards du Web. Bien que quelques navigateurs puissent encore la supporter, elle est en cours d'éradication. Ne l'utilisez ni dans d'anciens projets, ni dans de nouveaux. Les pages et applications Web l'utilisant peuvent cesser de fonctionner à tout moment.

La propriété **`Event.returnValue`** indique si l'action par défaut pour cet évènement a été empêchée ou non. Elle est définie à `true` (*vrai*) par défaut, permettant à l'action par défaut de se produire. La définition de cette propriété à `false` (*faux*) empêche le déclenchement de l'action par défaut.

**Note :** Utilisez `Event.preventDefault()` à la place de cette méthode non standard.

Syntaxe
-------


```js
event.returnValue = bool;
var bool = event.returnValue;
```

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

Bien qu'elle ait été inclue dans l'ancien brouillon de travail de W3C DOM niveau 2*, cette propriété ne fait partie d'aucune spécification.*

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

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

La propriété **`Event.cancelBubble`** est un alias historique de `Event.stopPropagation()`. Définir sa valeur à `true` (vrai) avant le renvoi à partir d'un gestionnaire d'évènements empêche la propagation de l'évènement. Dans les implémentations les plus tardives, cette définition à false (*faux*) ne fait rien. Voir Compatibilité des navigateurs pour plus de détails.

Syntaxe
-------


```js
event.cancelBubble = bool;
var bool = event.cancelBubble;
```

Exemple
-------


```js
elem.onclick = function (e) {
  // fais des choses sympas ici
  e.cancelBubble = true;
};
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-cancelbubble① |

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

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

**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.

La propriété en lecture seule **`originalTarget`**, rattachée à l'interface `Event`, renvoie la cible originale de l'évènement avant les éventuels reciblages. À la différence de `Event.explicitOriginalTarget`, il peut s'agir d'un contenu natif anonyme.

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

Il s'agit d'une propriété spécifique à Mozilla qui ne fait partie d'aucune spécification actuelle et qui n'est pas en voie de standardisation.

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

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

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

* Comparaison des cibles d'évènements
Event.target
============

C'est une référence à l'objet qui a envoyé l'événement. C'est une propriété différente de `event.currentTarget` lorsque le gestionnaire d'événements est appelé au cours de la phase de propagation ou de la phase de capture de l'événement.

Syntaxe
-------


```js
laCible = event.target;
```

Exemple
-------

La propriété `event.target` peut être utilisée pour implémenter la **délégation d'événements**.


```js
// Produit une liste
var ul = document.createElement("ul");
document.body.appendChild(ul);

var li1 = document.createElement("li");
var li2 = document.createElement("li");
ul.appendChild(li1);
ul.appendChild(li2);

function hide(e) {
  // e.target se réfère à l'élément <li> cliqué
  // C'est différent de e.currentTarget qui doit faire référence au parent <ul> dans ce contexte
  e.target.style.visibility = "hidden";
}

// Attache l'écouteur à la liste
// Il se déclenche pour chaque <li> clické
ul.addEventListener("click", hide, false);
```

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

| Specification |
| --- |
| DOM Standard # ref-for-dom-event-target③ |

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

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

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

Comparaison des cibles d'évènements