Canvas Html5
Paint En Ligne
Images Png Jpg
Dessin En Ligne
Outil Dessin Gratuit
Dessiner Et Telecharger
Outil En Ligne De Dessin
Dessin en ligne
∅
Taille du canvas :
×
Fond :
Dessinez en ligne gratuitement dans votre navigateur avec pinceau, formes, gomme, couleurs et epaisseur. Exportez votre dessin en PNG ou JPG sans installation.
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