• Introduction
• Insertion de canvas dans une page web
• Accéder au canvas en javascript
• Dessiner des formes
• Différents rectangles
• Gérer l'aspect d'une forme
• Dessiner des cercles et ellipses
• Tracer des lignes
• Tracer des courbes
• Ecrire du texte
• Ajouter des images
• Utiliser des motifs
• Gérer les propriétés dans le script
• Transformations des formes
• Translation
• Mise à l'échelle
• Rotation
• Utiliser une matrice de transformation
• Ajouter des ombres avec Canvas
• Créer des masques
• Modes de fusion et superposition
• Créer des animations avec canvas
• Effacer le contenu du canvas
• Gérer les intervalles de temps
• Mouvement linéaire simple
• Interagir avec l'utilisateur
• Utiliser la souris
• Détecter et utiliser un évènement clavier
• Collisions entre objets
• Prise en main de Canvas

Utiliser des motifs

l'utilisation de motif sera en général une forme particulière de l'utilisation d'images. 

var elem = document.getElementById('dessin');
var jeu = elem.getContext('2d');
var img = new Image();

img.onload = function() {
  var motif = jeu.createPattern(img, 'repeat');
  jeu.rect(0,0,300,32);
  jeu.fillStyle = motif;
  jeu.fill();
};
img.src = 'http://activdesign.eu/cours/canvas/images/fonds/motif1.png';

Observez le résultat si vous changez la position du rectangle :

jeu.rect(0,10,300,32);

Le motif reste en place et il semble être décalé. Cela tient au fait que le motif est une propriété du contexte. Il est donc calculé à partir du point d'origine 0,0. Pour obtenir un motif correctement placé, il sera éventuellement possible de faire une translation du contexte.