Discussion :

[Garra]

Bonjour à tous

je ne sais pas si ma question est bien placée dans ce forum (sinon, veuillez le déplacer )

je développe un site web HTML5 Responsive Design --> tout va bien, il s'affiche bien selon toutes les tailles des médias.

La question concerne un canvas.
J'ai bien compris que je dois, lors du resize() adapter aussi mon canvas pour que par exemple s'affiche en entier sur un smartphone.
Par contre ce que je ne sais pas c'est si :

- je dois modifier la taille du canvas et replacer tous les objets... pas terrible car ce sera trop serré
- zoomer le canvas jusqu'à ce qu'il soit suffisamment petit pour un smartphone et puis l'utilisateur zoomera avec ces petits doigts pour pouvoir lire quelque chose.

Quelle est la méthode préconisée (s'il y en a une)

merci bien de vos lumières et conseils

[SylvainPV]

Bonsoir,

Tu peux mettre à l'échelle ton canvas avec ctx.scale(x,y)
doc: https://developer.mozilla.org/fr/doc...ransformations

Il ne reste plus qu'à établir le facteur d'échelle en fonction de la largeur/hauteur disponible.

Pour une qualité de rendu optimale cependant, il serait plus judicieux de dessiner en vectoriel plutôt qu'en bitmap ; c'est à dire en SVG plutôt qu'en canvas

[Garra]

merci de ta réponse

j'ai travaillé hier sur le replacement des objets sur la scène lors du resize() et ça marche nickel!!!
je code avec de petites icones d'abord pour que ce soit bon pour des smartphones et puis je les ferai plus grand (taille d'origine) lors du resize.

je te remercie encore