• 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

Gérer les propriétés dans le script

Certaines propriétés peuvent être intéressantes à exploiter pour gérer la dimension de nos éléments de façon adaptative.

Adapter le canvas à la fenêtre de navigateur

function resize() {
  elem.width = window.innerWidth/2;
  elem.height = window.innerHeight/2;
  draw_canvas();
}

resize sera mis sur l'événement onload de la page html ou en eventListener.

Adapter un élément à la taille du canvas

De la même façon, le canvas peut servir de référence. Ainsi, pour

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

on accédera aux propriétés width, height  utilisé dans :

elem.width

elem.height

On obtiendra quelque chose du genre :

jeu.rect(0,0,elem.width,elem.height/(elem.height/32));

qui produit un rectangle occupant tout la largeur et une hauteur relative la haut du canvas.