Tableau blanc pour dessiner en ligne

Ce que vous pouvez faire ici

• Tracer à main levée avec une souris, un pavé tactile, un doigt ou un stylet compatible.
• Choisir librement la couleur et une épaisseur comprise entre 1 et 48 pixels.
• Effacer en recouvrant les traits avec la couleur blanche du fond.
• Annuler des tracés entiers dans la limite des trente états les plus récents.
• Vider le canevas après une demande de confirmation.
• Télécharger le dessin visible dans un fichier PNG de 960 × 560 pixels.

Réponse directe : comment dessiner en ligne puis garder le croquis

Choisissez une couleur, réglez l’épaisseur et faites glisser le pointeur dans la zone blanche. Un appui bref produit un point ; un déplacement continu forme un trait. Activez Gomme pour recouvrir une partie avec du blanc, puis désactivez-la avant de reprendre la couleur. Lorsque le dessin est prêt, sélectionnez Télécharger le PNG avant de recharger ou de quitter la page. Le fichier conserve une définition interne de 960 × 560 pixels, même si le canevas paraît plus étroit sur téléphone.

Le bouton Annuler revient à l’état qui précédait le dernier tracé terminé. Il ne retire pas seulement quelques pixels du mouvement. Le tableau conserve au maximum trente états afin de limiter la mémoire utilisée par les copies du canevas. Quand cette limite est dépassée, les états les plus anciens sont abandonnés. Vider le tableau crée lui aussi un état : une annulation immédiate peut donc récupérer le dessin, tant que l’onglet n’a pas été rechargé.

• 4 à 8 px : écriture large, flèches et schémas faciles à relire.
• 1 à 3 px : petits détails sur un écran suffisamment précis.
• 16 px et plus : titres, repères visibles ou aplats manuels.
• Téléchargement obligatoire avant fermeture : aucun brouillon serveur ne subsiste.

Tableau blanc, ardoise numérique ou logiciel de dessin : quelle différence ?

Ici, « tableau blanc » désigne un espace individuel et temporaire. Il sert à matérialiser une idée sans installer d’application : expliquer un angle pendant un partage d’écran, esquisser la disposition d’une diapositive, noter une direction sur un plan simplifié ou préparer une miniature. L’interface reste volontairement courte afin de passer du besoin au premier trait sans créer de document, de compte ni d’espace de travail.

Ce n’est pas un tableau blanc collaboratif. La page ne crée ni salle, ni lien d’invitation, ni curseur partagé et deux personnes ne peuvent pas modifier le même canevas. Ce n’est pas non plus un logiciel vectoriel : il n’y a pas de calques, texte éditable, sélection d’objet, formes géométriques, import d’image ou export SVG. Pour des longueurs et formes précises, la CAO 2D est plus adaptée ; pour une suite d’étapes reliées, choisissez le créateur de diagramme de flux.

Pour tracer des formes avec grille, mesures et export SVG, utilisez la CAO 2D en ligne .

Souris, écran tactile et stylet : ce que font les Pointer Events

Le dessin s’appuie sur les Pointer Events du Web. Cette API représente la souris, le contact tactile et le stylet à travers un même modèle d’événements. Au début d’un trait, le canevas capture le pointeur afin de continuer à recevoir ses déplacements jusqu’au relâchement, même si le geste s’écarte légèrement. Dans la zone de dessin, le navigateur ne doit pas transformer le geste en défilement de page ; cela rend le trait plus stable sur mobile.

Les coordonnées visibles sont mises à l’échelle vers les 960 × 560 pixels du canevas. Un téléphone peut donc afficher une version réduite tout en exportant la définition entière. Cela n’invente toutefois aucun détail : un doigt masque une zone plus large qu’une pointe de stylet, certains pavés tactiles lissent les mouvements et le zoom du navigateur change le confort de visée. L’outil n’exploite ni pression ni inclinaison ; l’épaisseur reste celle du curseur.

Méthode simple pour obtenir un croquis lisible

Commencez par la question à laquelle le dessin doit répondre. Si une autre personne doit comprendre la hiérarchie d’une page, tracez d’abord les grands blocs et la direction de lecture. Si vous expliquez un mécanisme, placez les éléments, puis ajoutez les relations et enfin les détails. Une structure sommaire mais cohérente est souvent plus utile qu’un dessin chargé de petites annotations difficiles à voir.

Gardez une couleur sombre pour la structure et réservez une seconde couleur à une correction, un danger ou un élément prioritaire. Multiplier les couleurs sans légende oblige le lecteur à deviner. Laissez également une marge : le PNG contient le canevas complet et ne recadre pas automatiquement la zone dessinée. Avant de télécharger, vérifiez le contraste sur blanc, les pointes de flèches et la taille réelle d’affichage du futur destinataire.

• Énoncez en une phrase ce que le lecteur doit comprendre.
• Tracez les contours avant les annotations et les détails.
• Employez des flèches dont la pointe et le sens restent évidents.
• Ouvrez le PNG téléchargé avant d’effacer le tableau.

Gomme blanche, annulation et limites de correction

La gomme ne supprime pas des objets : elle dessine en blanc par-dessus les pixels. Le résultat convient parce que le fond du canevas est blanc, mais il ne produit aucune transparence. Si un trait coloré croise un autre trait, gommer la partie supérieure peut aussi recouvrir la partie inférieure. Zoomez la page ou réduisez l’épaisseur pour corriger une zone serrée, puis contrôlez le résultat à l’échelle normale.

L’historique photographie le canevas après chaque trait terminé. Cette approche rend l’annulation prévisible, mais chaque état consomme de la mémoire ; la limite de trente est donc volontaire. Il n’existe pas de bouton Rétablir : après avoir annulé, un nouveau trait devient la nouvelle suite du dessin. Pour comparer plusieurs variantes sans risque, téléchargez un PNG à chaque étape importante au lieu de compter sur l’historique de l’onglet.

PNG, dimensions, impression et qualité visuelle

Le format PNG convient aux lignes, aux aplats et à l’écriture dessinée, car son encodage sans perte évite les blocs typiques d’un JPEG très compressé. Le navigateur crée le fichier à partir de `HTMLCanvasElement.toDataURL()`. MDN précise que le PNG est le format par défaut et que les images créées utilisent 96 dpi lorsque le format gère cette information. Le fichier FunnyTools garde toujours un fond blanc.

Une image de 960 × 560 pixels est suffisante pour un message, une note ou une insertion à l’écran. Elle n’est pas vectorielle : agrandir fortement le PNG fait apparaître les pixels. À 96 ppp, la correspondance théorique est d’environ 25,4 × 14,8 cm ; à 300 ppp, environ 8,1 × 4,7 cm. Ces dimensions servent de repère, car le logiciel d’impression peut rééchantillonner ou ajuster l’image à la page.

Confidentialité, fermeture de l’onglet et partage

Les traits et les états d’annulation résident dans la mémoire de cette page. FunnyTools ne reçoit pas le dessin et aucun compte n’en conserve une copie. Ce traitement local réduit les transferts, mais il supprime aussi toute récupération automatique : une actualisation, une fermeture, un manque de mémoire ou un plantage peut faire disparaître le travail. Pour un contenu difficile à refaire, téléchargez régulièrement des versions intermédiaires.

Un croquis peut malgré tout révéler un nom, une adresse, une signature, une organisation de classe ou une information confidentielle au moment où vous partagez le PNG. Relisez l’image entière et pas seulement la zone principale. Ne présentez pas une signature dessinée comme une signature électronique valable. Le site ne peut ni effacer une copie déjà téléchargée ni contrôler le canal auquel vous l’envoyez.

Quand passer à la CAO, au diagramme de flux ou à un outil collaboratif

Utilisez ce tableau pour l’exploration rapide et l’explication informelle. Passez à la CAO 2D si les longueurs, angles, accrochages ou formes géométriques doivent rester modifiables. Préférez un diagramme de flux quand les rectangles et losanges portent un sens précis. Un outil de présentation conviendra mieux si le texte doit rester éditable, et une plateforme collaborative sera nécessaire pour plusieurs curseurs, commentaires et historique partagé.

Le bon critère n’est pas le nombre de boutons mais la vie future du document. Un croquis jetable peut rester rasterisé ; une procédure officielle, un plan coté ou un support révisé pendant plusieurs mois demande un format éditable, des versions et une personne responsable. Le PNG de cette page peut servir d’amorce ou d’illustration, pas de source structurée réutilisable.

Mode d’emploi étape par étape

1. Choisissez la couleur du pinceau et réglez une épaisseur entre 1 et 48 pixels.
2. Dessinez sur le canevas blanc avec une souris, un doigt ou un stylet ; un appui bref crée un point.
3. Activez Gomme pour recouvrir les pixels de blanc, puis désactivez-la avant de reprendre le pinceau.
4. Sélectionnez Annuler pour revenir avant le dernier trait terminé, dans la limite de trente états.
5. Utilisez Vider et confirmez seulement si vous souhaitez remettre tout le canevas en blanc.
6. Téléchargez `tableau-blanc.png`, ouvrez le fichier et contrôlez-le avant de quitter la page.

Dans quelles situations cet outil est utile

• Esquisser la place du titre, d’une image et d’un bouton sur une future diapositive.
• Expliquer une fraction, un angle ou une relation spatiale pendant un partage d’écran.
• Tracer un itinéraire très simple avec trois repères et une flèche d’arrivée.
• Préparer la composition d’une vignette avant de travailler dans un logiciel à calques.
• Noter visuellement une idée pendant une réunion sans créer de compte.

Exemples détaillés

Limites et vérifications importantes

• Aucune sauvegarde automatique n’est disponible après fermeture ou rechargement.
• La gomme peint en blanc et ne crée pas de transparence.
• L’historique conserve au maximum trente états et ne propose pas Rétablir.
• Le PNG mesure 960 × 560 pixels et peut se pixelliser après fort agrandissement.
• Il n’existe ni calque, ni import d’image, ni texte éditable, ni collaboration en temps réel.

Sources et documentation à consulter

• MDN : événements de pointeur Décrit le modèle commun aux souris, stylets et contacts tactiles ainsi que la capture du pointeur.
• W3C : Pointer Events Spécification de référence pour les événements et les périphériques de pointage.
• MDN : HTMLCanvasElement.toDataURL() Explique la représentation du canevas sous forme de Data URL et l’export PNG.

Questions fréquentes