Dessin vituel

À propos

Cette web app permet de dessiner par dessus une image directement dans le navigateur et de télécharger ensuite le rendu. Elle s'adapte automatiquement à la taille de l'écran.

Il est possible de modifer l'épaisseur du trait, de changer de couleur. De plus, un historique des tracés effectués est conservé pour pouvoir annuler les tracés précédents si nécessaire.

Elle a été utilisée dans le cadre du calendrier de l'Avent d'énigmes Lockee.fr pour faciliter la résolution d'une énigme dans impression (pour remplacer Genially qui posait problème).

Défis techniques

• Canvas HTML5 : gestion du dessin vectoriel et raster sur image de fond
• Responsive design : adaptation automatique à toutes les tailles d'écran
• Gestion des événements : capture précise des mouvements souris et tactile
• Historique des actions : système d'annulation/refaire pour les tracés
• Export d'image : génération et téléchargement du rendu final
• Performance : optimisation du rendu pour éviter les ralentissements

Solutions apportées

Architecture technique

• HTML5 Canvas pour le rendu graphique et la gestion du dessin
• Vanilla JavaScript pour la logique de dessin et les interactions
• CSS responsive pour l'adaptation aux différentes tailles d'écran
• Système d'historique : pile d'actions pour annuler/refaire
• API de téléchargement : génération automatique du fichier image
• Gestion d'événements : support souris et tactile pour tous les appareils

Fonctionnalités clés

• Dessin sur image : superposition de tracés sur une image de fond
• Outils de dessin : modification de l'épaisseur et de la couleur des traits
• Historique complet : annulation et refaire des actions précédentes
• Export automatique : téléchargement du rendu final en image
• Interface responsive : adaptation automatique à tous les écrans
• Support tactile : utilisation optimale sur tablettes et smartphones

Résultats

Cet outil de dessin virtuel répond parfaitement aux besoins d'annotation d'images dans un contexte rapide et ludique.

L'interface intuitive et responsive permet une utilisation fluide sur tous les appareils, tandis que l'export automatique facilite le partage des créations.

Avec ce projet, je démontre ma capacité à créer des solutions techniques simples mais efficaces, capables de remplacer des outils plus complexes comme Genially dans des contextes spécifiques.