Canvas Html5
Paint En Ligne
Images Png Jpg
Dessin En Ligne
Outil Dessin Gratuit
Dessiner Et Telecharger
Outil En Ligne De Dessin
Dessinez en ligne gratuitement dans votre navigateur avec pinceau, formes, gomme, couleurs et epaisseur. Exportez votre dessin en PNG ou JPG sans installation.
Dessin en ligne
∅
Taille du canvas :
×
Fond :
L'API Canvas HTML5
L'élément <canvas> permet de dessiner des graphiques 2D (et 3D avec WebGL) directement dans le navigateur via JavaScript.
À retenir : Le Canvas est une surface bitmap — ce qu'on dessine devient des pixels. Il est différent du SVG qui est vectoriel.
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Dessiner un rectangle
ctx.fillStyle = '#3498db';
ctx.fillRect(10, 10, 100, 50);
// Dessiner un cercle
ctx.beginPath();
ctx.arc(200, 100, 40, 0, Math.PI * 2);
ctx.fillStyle = '#e74c3c';
ctx.fill();
Outils disponibles dans ce dessin
- ✏️ Crayon — trait fin et précis
- 🖌️ Pinceau — trait doux et arrondi
- ╱ Ligne — ligne droite entre deux points
- ▭ Rectangle — rectangle plein ou contour
- ○ Cercle — ellipse pleine ou contour
- 🪣 Remplissage — remplit une zone de couleur uniforme
- ⬜ Gomme — efface des parties du dessin
- T Texte — ajoute du texte au clic
Raccourcis clavier
Ctrl+Z— AnnulerCtrl+Y/Ctrl+Shift+Z— RefaireCtrl+S— TéléchargerDelete— Effacer toutE— Activer la gommeB— Activer le pinceau
Usages du Canvas en développement
- ✅ Génération d'images dynamiques (graphiques, badges)
- ✅ Jeux vidéo 2D en JavaScript
- ✅ Signature électronique
- ✅ Éditeurs de photos en ligne
- ✅ Visualisation de données (charts)
- ✅ Filtres et effets sur des images