Dessin en ligne : créer et télécharger PNG/JPG

🏷️ Outils en ligne 📅 14/04/2026 07:00:00 👤 Mezgani said
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

Trait
Fill
Ép. 4
Opac. 100%
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 — Annuler
  • Ctrl+Y / Ctrl+Shift+Z — Refaire
  • Ctrl+S — Télécharger
  • Delete — Effacer tout
  • E — Activer la gomme
  • B — 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