• 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

Ajouter des images

Ajouter à une position : drawImage(img,x,y)

avec image ou SVG

      var img = new Image();

      img.onload = function() {
        jeu.drawImage(img, 69, 50);
      };
      img.src = 'http://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg';

Changer la dimension : drawImage(img,x,y,w,h)

jeu.drawImage(img, 69, 50, 100, 100);

dimensions proportionnelles à l'image d'origine

jeu.drawImage(img, 69, 50, img.width/2, img.width/2);

dimensions proportionnelles au conteneur canvas

jeu.drawImage(img, 69, 50, elem.width/2, elem.width/2);

Créer un Sprite : drawImage(img, sx, sy, sw, sh, x,y,w,h)

var img=new Image();
img.src='images/sprites/sprites1.png';
img.onload=function(){
    jeu.drawImage(img,90,20,111,81);
    jeu.drawImage(img,0,0,111,162,90,120,111,162); // source xylh, destination (canvas)
};