Canvas tutorial

Si comme pour la plupart des jeux, vous utilisez une image de fond statique, préférez utiliser un simple {{HTMLElement("div")}} en dessous du canvas avec les propriétés CSS {{cssxref("background")}} appropriées. Cela vous évitera de redessiner une grande image dans le canvas à chaque tick.

Redimensionner les canvas avec CSS transform

Les transformations CSS sont plus rapides car elles utilisent le GPU. Le mieux est d'utiliser un canvas plus grand et de réduire sa taille. Pour Firefox OS, les dimensions sont de 480 x 320 px.

Utiliser l'attribut moz-opaque (Gecko only)

Si le canvas n'a pas besoin de transparence, ajouter l'attribut moz-opaque dans la balise canvas. Cette information peut être utilisée par le navigateur pour optimiser le rendu.

D'autres conseils

Voir aussi

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

Jusqu'à présent, nous n'avons pas examiné dans le détail les pixels réels de notre canevas. Avec l'objet ImageData, vous pouvez directement lire et écrire dans le tableau de données de l'image, pour manipuler les pixels un par un. Nous verrons également comment le lissage (anticrénelage) de l'image peut être contrôlé et comment sauvegarder des images depuis votre canevas.

L'objet ImageData

L'objet {{domxref("ImageData")}} représente les données de pixels sous-jacentes à une zone d'un objet canevas. Il contient les attributs (en lecture seule) suivants :

La propriété data retourne un tableau {{jsxref("Uint8ClampedArray")}} auquel on peut accéder pour voir plus en détail les données brutes des pixels ; chaque pixel est représenté par quatre valeurs sur un octet (rouge, vert, bleu et alpha, dans cet ordre ; c'est-à-dire, le format "RVBA"). Chaque composante de couleur est représentée par un entier entre 0 et 255. Chaque composante reçoit un indice à l'intérieur du tableau, la composante rouge du pixel supérieur gauche étant à l'indice 0 à l'intérieur du tableau. Les pixels continuent ensuite de gauche à droite, puis vers le bas, jusqu'au bout du tableau.

Le {{jsxref("Uint8ClampedArray")}} contient height(hauteur) × width(largeur) × 4 octets, dont les valeurs d'indices vont de 0 à (height×width×4)-1.

Par exemple, pour lire la valeur de la composante bleue d'un pixel situé en colonne 200, ligne 50 de l'image, vous pouvez faire ce qui suit :

Vous pouvez accéder à la taille en octets du tableau de pixels en lisant l'attribut Uint8ClampedArray.length :

Création d'un objet ImageData

Pour créer un nouvel objet ImageData vierge, vous pouvez utiliser la méthode {{domxref("CanvasRenderingContext2D.createImageData", "createImageData()")}}. Il existe deux versions de la méthode createImageData() :

Cela crée un nouvel objet ImageData avec les dimensions spécifiées. Tous les pixels sont prédéfinis comme étant noirs transparents.

Vous pouvez aussi créer un nouvel objet ImageData ayant les mêmes dimensions que celles de l'objet indiqué par autreImageData. Les pixels du nouvel objet sont tous prédéfinis comme étant noirs transparents. Cela ne copie pas les données d'image !

Obtention des données pixel pour un contexte

Pour obtenir un objet ImageData contenant une copie des données pixel pour un contexte de canevas, vous pouvez utiliser la méthode getImageData() :

Cette méthode retourne un objet ImageData représentant les données pixel pour la zone du canevas dont les coins sont représentés par les points (left,top) (gauche,haut), (left+width, top) (gauche+largeur, haut), (left, top+height) (gauche, haut+hauteur) et (left+width, top+height) (gauche+largeur, haut+hauteur). Les coordonnées sont spécifiées en unités d'espace de coordonnées du canevas.

Une pipette à couleur

Dans cet exemple, nous utilisons la méthode getImageData() pour afficher la couleur en dessous du curseur de la souris. Pour cela, nous avons besoin de la position en cours de la souris donnée par layerX et layerY, nous recherchons ensuite les données pixel à cette position dans le tableau de pixels que getImageData() nous fournit. Finalement, nous utilisons les données du tableau pour définir une couleur d'arrière-plan et un texte dans le <div> pour afficher la couleur.

` pour afficher la couleur. -

<canvas id="canvas" width="300" height="227" style="float:left"></canvas>
-<div id="color" style="width:200px;height:50px;float:left"></div>
-

+```html hidden +

+``` -

var img = new Image();
-img.src = './assets/rhino.jpg';
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-img.onload = function() {
-  ctx.drawImage(img, 0, 0);
-  img.style.display = 'none';
-};
-var color = document.getElementById('color');
-function pick(event) {
-  var x = event.layerX;
-  var y = event.layerY;
-  var pixel = ctx.getImageData(x, y, 1, 1);
-  var data = pixel.data;
-  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
-             ', ' + data[2] + ', ' + (data[3] / 255) + ')';
-  color.style.background =  rgba;
-  color.textContent = rgba;
-}
-canvas.addEventListener('mousemove', pick);

+ var img = new Image(); + img.src = './assets/rhino.jpg'; + var canvas = document.getElementById('canvas'); + var ctx = canvas.getContext('2d'); + img.onload = function() { + ctx.drawImage(img, 0, 0); + img.style.display = 'none'; + }; + var color = document.getElementById('color'); + function pick(event) { + var x = event.layerX; + var y = event.layerY; + var pixel = ctx.getImageData(x, y, 1, 1); + var data = pixel.data; + var rgba = 'rgba(' + data[0] + ', ' + data[1] + + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; + color.style.background = rgba; + color.textContent = rgba; + } + canvas.addEventListener('mousemove', pick); -

+{{ EmbedLiveSample('A_color_picker', 610, 240) }} -

Peinture des données pixel dans un contexte

+## Peinture des données pixel dans un contexte -

Vous pouvez utiliser la méthode putImageData() pour peindre les données pixel dans un contexte :

+Vous pouvez utiliser la méthode [putImageData() ](/fr/docs/Web/API/CanvasRenderingContext2D/putImageData)pour peindre les données pixel dans un contexte : -

ctx.putImageData(monImageData, dx, dy);
-

+```js +ctx.putImageData(monImageData, dx, dy); +``` -

Les paramètres dx et dy indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes.

+Les paramètres `dx` et `dy` indiquent les coordonnées système dans le contexte du coin supérieur gauche des données pixel qui doivent être peintes. -

Par exemple, pour peindre l'image entière représentée par monImageData dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit :

+Par exemple, pour peindre l'image entière représentée par `monImageData` dans le coin supérieur gauche du contexte, vous pouvez simplement faire ce qui suit : -

ctx.putImageData(monImageData, 0, 0);
-

+```js +ctx.putImageData(monImageData, 0, 0); +``` -

Niveaux de gris et inversion de couleurs

+### Niveaux de gris et inversion de couleurs -

Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de putImageData(). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale (niveaux de gris) fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir Niveaux de gris sur Wikipedia pour plus d'informations.

+Dans cet exemple, nous itérons sur tous les pixels pour changer leurs valeurs, puis nous remettons le tableau de pixels modifié sur le canevas à l'aide de [putImageData()](/fr-FR/docs/Web/API/CanvasRenderingContext2D/putImageData). La fonction inversion soustrait simplement chaque couleur de la valeur maximale 255. La fonction grayscale _(niveaux de gris)_ fait simplement la moyenne du rouge, du vert et du bleu. Vous pouvez également utiliser une moyenne pondérée, donnée par la formule x = 0.299r + 0.587v + 0.114b, par exemple. Voir [Niveaux de gris](https://fr.wikipedia.org/wiki/Niveau_de_gris) sur Wikipedia pour plus d'informations. -

<canvas id="canevas" width="300" height="227"></canvas>
-<div>
-  <input id="btnniveaudegris" value="Niveau de gris" type="button">
-  <input id="btninversion" value="Inversion" type="button">
-</div>
-

+```html hidden +

+ + +

+``` -

var img = new Image();
+```js
+var img = new Image();
 img.src = './assets/rhino.jpg';
 img.onload = function() {
   dessiner(this);
@@ -131,7 +141,7 @@ function dessiner(img) {
   var data = imageData.data;
 
   var inversion = function() {
-    for (var i = 0; i < data.length; i += 4) {
+    for (var i = 0; i < data.length; i += 4) {
       data[i]     = 255 - data[i];     // rouge
       data[i + 1] = 255 - data[i + 1]; // vert
       data[i + 2] = 255 - data[i + 2]; // bleu
@@ -140,7 +150,7 @@ function dessiner(img) {
   };
 
   var niveaudegris = function() {
-    for (var i = 0; i < data.length; i += 4) {
+    for (var i = 0; i < data.length; i += 4) {
       var moy = (data[i] + data[i + 1] + data[i + 2]) / 3;
       data[i]     = moy; // rouge
       data[i + 1] = moy; // vert
@@ -154,35 +164,39 @@ function dessiner(img) {
   var btnniveaudegris = document.getElementById('btnniveaudegris');
   btnniveaudegris.addEventListener('click', niveaudegris);
 }
-

+``` -

{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }}

+{{ EmbedLiveSample('Grayscaling_and_inverting_colors', 330, 270) }} -

Zoom et anticrénelage

+## Zoom et anticrénelage -

A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails.

+A l'aide de la méthode {{domxref ("CanvasRenderingContext2D.drawImage", "drawImage ()")}}, un deuxième canevas, et la propriété {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} , nous pouvons zoomer sur notre image et voir les détails. -

Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200.

+Nous obtenons la position de la souris et recadrons une image de 5 pixels à gauche et au-dessus à 5 pixels à droite et en-dessous. Ensuite, nous copions celle-ci sur un autre canevas et redimensionnons l'image à la taille que nous voulons. Dans la zone de zoom, nous redimensionnons une zone de 10 × 10 pixels du canevas d'origine à 200 × 200. -

zoomctx.drawImage(canvas,
+```js
+zoomctx.drawImage(canvas,
                   Math.abs(x - 5), Math.abs(y - 5),
-                  10, 10, 0, 0, 200, 200);

+ 10, 10, 0, 0, 200, 200); +``` -

Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété imageSmoothingEnabled (qui a besoin de préfixes pour différents navigateurs).

+Étant donné que l'anticrénelage est activé par défaut, nous pouvons désactiver le lissage pour voir les pixels clairs. Vous pouvez basculer la case à cocher pour voir l'effet de la propriété `imageSmoothingEnabled` (qui a besoin de préfixes pour différents navigateurs). -

Exemple de zoom

+### Exemple de zoom -

<canvas id="canvas" width="300" height="227"></canvas>
-<canvas id="zoom" width="300" height="227"></canvas>
-<div>
-<label for="smoothbtn">
-  <input type="checkbox" name="smoothbtn" checked="checked" id="smoothbtn">
+```html hidden
+
+
+
+
+  
   Enable image smoothing
-</label>
-</div>
-

+ +

Sauvegarde des images

L' {{domxref ("HTMLCanvasElement")}} fournit une méthode toDataURL (), utile lors de l'enregistrement d'images. Il retourne un URI de données contenant une représentation de l'image dans le format spécifié par le paramètre de type (par défaut en PNG ). L'image renvoyée est dans une résolution de 96 dpi.

Une fois que vous avez généré un URI de données à partir de votre canevas, vous pouvez l'utiliser comme source de {{HTMLElement ("image")}} ou le mettre dans un lien hypertexte avec un attribut de téléchargement pour l'enregistrer sur le disque par exemple.

Voir aussi

{{PreviousNext("Tutoriel_canvas/Advanced_animations", "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility")}}

Précédemment dans ce tutoriel, nous avons étudié la grille du canevas et le système de coordonnées. Jusqu'à maintenant, nous avons uniquement utilisé la grille par défaut et modifié la taille de la globalité du canevas afin de répondre à nos besoins. Les transformations que nous allons aborder dans la suite vont nous permettre, de manière plus puissante, d'effectuer des déplacements et des rotations sur la grille et même d'effectuer des mises à l'échelle.

Sauvegarde et restauration d'état

Avant d'étudier les méthodes de transformations, examinons deux autres méthodes qui vont être indispensables à partir du moment où l'on commence à créer des dessins complexes.

Les états du canevas sont stockés dans une pile. Chaque invocation de la méthode save() ajoute une copie de l'état courant du canevas en haut de la pile. L'état du dessin est constitué de :

La méthode save() peut être invoquée autant de fois que nécessaire. Chaque appel de restore() enlève le dernier état sauvegardé de la pile et tous les paramètres sauvegardés sont restaurés.

Un exemple de sauvegarde et de restauration de l état du canevas

Cet exemple tente d'illustrer comment fonctionne la pile d'états de dessin en dessinant un ensemble de rectangles consécutifs.

La première étape consiste à dessiner un grand rectangle avec les paramètres par défaut. Ensuite, nous sauvegardons cet état et modifions la couleur de remplissage. Nous dessinons ensuite le deuxième rectangle bleu et mettons l'état de côté. Encore une fois, nous modifions certains paramètres de dessin et dessinons le troisième rectangle blanc semi-transparent.

Jusqu'à présent, cela ressemble beaucoup à ce que nous avons fait dans les sections précédentes. Cependant, une fois que nous appelons la première instruction restore(), l'état de dessin supérieur est supprimé de la pile et les paramètres sont restaurés. Si nous n'avions pas sauvegardé l'état en utilisant save (), nous devrions modifier manuellement la couleur de remplissage et la transparence afin de revenir à l'état précédent. Cela serait facile pour deux propriétés, mais si nous avons plus que cela, notre code deviendrait très long très rapidement.

Lorsque la deuxième instruction restore() est appelée, l'état d'origine (celui que nous avons configuré avant le premier appel à enregistrer) est restauré et le dernier rectangle est de nouveau tracé en noir.

{{EmbedLiveSample("Un_exemple_de_sauvegarde_et_de_restauration_de_l_état_du_canevas", "180", "180", "canvas_savestate.png")}}

Déplacement

La première des méthodes de transformation que nous examinerons est translate (). Cette méthode est utilisée pour déplacer la toile et son origine vers un autre point de la grille.

C'est une bonne idée de sauvegarder l'état du canevas avant d'effectuer des transformations. Dans la plupart des cas, il est plus facile d'appeler la méthode restore que d'avoir à effectuer un déplacement inverse pour revenir à l'état d'origine. De même, si vous déplacez à l'intérieur d'une boucle et que vous ne sauvegardez pas et ne restaurez pas l'état du canevas, il se peut qu'une partie de votre dessin soit manquante, car elle a été dessinée en dehors du bord du canevas.

Un exemple translate

Cet exemple montre certains des avantages du déplacement de l'origine du canevas. Sans la méthode translate (), tous les rectangles seraient dessinés à la même position (0,0). La méthode translate () nous donne également la liberté de placer le rectangle n'importe où sur le canevas sans avoir à ajuster manuellement les coordonnées dans la fonction fillRect (). Cela le rend un peu plus facile à comprendre et à utiliser.

Dans la fonction draw (), nous appelons la fonction fillRect () neuf fois en utilisant deux boucles for . Dans chaque boucle, le canevas est déplacé, le rectangle est dessiné et le canevas est retourné à son état d'origine. Notez comment l'appel à fillRect () utilise les mêmes coordonnées à chaque fois, en s'appuyant sur translate () pour ajuster la position du dessin.

Rotation

La seconde méthode de transformation est rotate(). Nous l'utilisons pour faire pivoter le canevas autour de l'origine actuelle.

Le point central de rotation est toujours l'origine de la toile. Pour changer le point central, nous devrons déplacer le canevas en utilisant la méthode translate ().

Un exemple rotate

Dans cet exemple, nous utiliserons la méthode rotate () pour faire d'abord tourner un rectangle à partir de l'origine du canevas, puis du centre du rectangle lui-même à l'aide de translate ().

Pour faire pivoter le rectangle autour de son propre centre, nous déplaçons le canevas au centre du rectangle, puis faisons pivoter le canevas, puis le déplaçons à 0,0, puis dessinons le rectangle.

Mise à l'échelle

La méthode de transformation suivante est la mise à l'échelle. Nous l'utilisons pour augmenter ou diminuer les unités de notre grille de canevas. Cela peut être utilisé pour dessiner des formes ou des bitmaps réduits ou agrandis.

En utilisant des nombres négatifs, vous pouvez faire une mise en miroir d'axe (par exemple en utilisant translate (0, canvas.height), scale (1, -1), vous aurez le système de coordonnées cartésien bien connu, avec l'origine dans le coin inférieur gauche).

Par défaut, une unité sur la toile est exactement un pixel. Si nous appliquons, par exemple, un facteur d'échelle de 0,5, l'unité résultante deviendrait 0,5 pixels et ainsi les formes seraient dessinées à la moitié de la taille. De la même façon, si nous définissons le facteur d'échelle sur 2.0, la taille de l'unité augmentera et une unité deviendra deux pixels. Cela donne des formes dessinées deux fois plus grandes.

Un exemple scale

Dans ce dernier exemple, nous allons dessiner des formes avec différents facteurs d'échelle.

Transformation

Enfin, les méthodes de transformation suivantes appliquent des modifications directement à la matrice de transformation.

Exemple pour transform et setTransform

{{EmbedLiveSample("Exemple_pour_transform_et_setTransform", "230", "280", "canvas_transform.png")}}

{{PreviousNext("Tutoriel_canvas/Utilisation_d'images", "Tutoriel_canvas/Composition")}}

{{CanvasSidebar}}{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

Jusqu'à présent, nous avons créé nos propres formes et styles appliqués. L'une des fonctionnalités les plus intéressantes de <canvas> est la possibilité d'utiliser des images. Celles-ci peuvent être utilisées pour faire de la composition dynamique de photos ou comme décors de graphes, pour des sprites dans des jeux, et ainsi de suite. Les images externes peuvent être utilisées dans n'importe quel format pris en charge par le navigateur, comme PNG, GIF ou JPEG. Vous pouvez même utiliser l'image produite par d'autres éléments du canevas sur la même page comme source !

Dessinons une balle

Ajout de la vitesse

Limites

Première demo

Accélération

Deuxième démo

Effet de traînée

Troisième démo

Ajout d'un contrôle de souris

Casse-briques

Voir aussi

Les couleurs

Un exemple fillStyle

Un exemple strokeStyle

Transparence

Un exemple globalAlpha

Un exemple en utilisant rgba()

Le style des lignes

Un exemple lineWidth

Un exemple de lineCap

Un exemple de lineJoin

Une démonstration de la propriété miterLimit

Utilisation de lignes pointillées

Dégradés

Un exemple de createLinearGradient

Un exemple de createRadialGradient

Modèles

Un exemple de createPattern

Ombres

Un exemple de texte ombré

Règles de remplissage Canvas

Les étapes d'une animation basique

Contrôle d'une animation

Mises à jour planifiées

Un système terrestre animé

Une horloge animée

Un panorama défilant en boucle

Autres exemples

L'élément <canvas>

Contenu de repli

La nécessité de la balise </canvas>

Le contexte de rendu

Vérification de la prise en charge

Un modèle basique

Un exemple simple

Exemple de composition

Programme principal

Fonctions utilitaires

globalCompositeOperation

Détourage

Un exemple de clip

La grille

Dessin de rectangles

Exemple de forme rectangulaire

Dessin de trajets

Dessin d'un triangle

Déplacement du stylo

Les lignes

Les arcs

Les courbes quadratiques et de Bézier

Courbes de Bézier quadratiques

Les courbes de Bézier cubiques

Rectangles

Combiner les possibilités

Objets Path2D

Exemple de Path2D

Utilisation de trajets SVG

Dessin de texte

Un exemple fillText

Un exemple de strokeText

Style de texte

Un exemple de textBaseline

Playable code

Mesures de texte avancées

Notes spécifiques à Gecko

Moyen de repli

Shapes

Les règles ARIA

Zones cibles (hit Region)

Focus rings

Un exemple `fillStyle`

Un exemple `strokeStyle`

Un exemple `globalAlpha`

Un exemple en utilisant `rgba()`

Un exemple `lineWidth`

Un exemple de `lineCap`

Un exemple de `lineJoin`

Une démonstration de la propriété `miterLimit`

Un exemple de `createLinearGradient`

Un exemple de `createRadialGradient`

Un exemple de `createPattern`

L'élément `<canvas>`

La nécessité de la balise `</canvas>`

`globalCompositeOperation`

Un exemple de `clip`

Ne pas redimensionner d'images avec `drawImage`

Utiliser l'attribut `moz-opaque` (Gecko only)

L'objet `ImageData`

Création d'un objet `ImageData`

Un exemple `translate`

Un exemple `rotate`

Un exemple `scale`

Exemple pour `transform` et `setTransform`