Faire des canvas responsives.

Mettre #canvas { width: 100% } ne marchera pas : c’est comme mettre ça sur une image : ça l’étire. Il faut aussi modifier le $canvas.width en JS.

Solution :
– ajouter un event "resize" sur la fenêtre que va être déclenché que la fenêtre change de taille (et au chargement de la page).
– cet event va calculer la nouvelle taille du conteneur d’un canvas et et donner cette taille au canvas
– et va refaire tous les tracés.

Si on ne fait pas ça, le tracé est étiré ou comprimé si la taille du canvas dans les attributs width/height ne correspondent pas aux dimensions spécifiées en CSS.

Démo : http://ameijer.nl/demo/respondCanvas.html
(Ctrl+Alt+M pour resize dans Firefox)
— (permalink)