Skip to content

Canvas

Le Canvas est un espace illimité où vous placez librement notes, formes, images, flèches, dessins et bien plus. C’est l’outil le plus polyvalent de H-Board, idéal pour le brainstorming, le mind mapping, les schémas d’architecture, les moodboards ou les ateliers collaboratifs.

📷 [IMAGE — Canvas complet] Capture d’un Canvas riche : notes colorées, formes, flèches, images, colonnes, dessin libre

📷 [IMAGE — Layout général du Canvas] Capture annotée : zone centrale infinie, toolbar en bas, header en haut, mini-carte en bas-droite

ZoneContenu
En-têteNom du projet, breadcrumb (si sous-tableau), avatars des collaborateurs, bouton partager, bouton export
Zone centraleEspace infini où vous placez vos éléments. Pannable et zoomable
Barre d’outils (bas-centre)Outils de création groupés en 3 catégories
Panneau de personnalisation (à droite)Apparaît quand un élément est sélectionné, ou en mode dessin
Mini-carte (bas-droite)Vue d’ensemble avec rectangle de viewport
Boutons annexes (bas-droite)Recentrer, plein écran, grille, annuler/refaire

Tous les outils de création disparaissent si vous êtes un utilisateur lecture seule — seule la navigation reste disponible.

L’espace est infini : vous pouvez créer des éléments aussi loin que vous le souhaitez de l’origine.

ActionComment
Glisser le fondCliquez sur le vide et glissez
Barre d’espace + glisserMaintenir Espace puis cliquer/glisser n’importe où
ScrollbarsVisibles en bas et à droite, draggables
ActionComment
MoletteRoulez la molette de la souris pour zoomer/dézoomer
Boutons zoomCliquez sur le pourcentage de zoom pour le menu (préréglages)
LimitesDe 10 % à 500 %

Cliquez sur le bouton Recentrer (icône flèche circulaire) en bas à droite : la vue revient à 100 % et se centre sur le contenu.

🎥 [VIDÉO — Pan / Zoom / Recentrer] Démo : déplacement avec espace, zoom à la molette, clic sur recentrer

Cliquez sur l’icône carte pour afficher la mini-carte : un rectangle bleu indique votre zone visible. Glissez ce rectangle pour vous déplacer rapidement dans un grand Canvas.

📷 [IMAGE — Mini-carte] Gros plan de la mini-carte avec le rectangle de viewport et plusieurs éléments colorés

Cliquez sur le bouton plein écran (icône expand) en bas à droite pour basculer en mode immersif (l’interface du navigateur disparaît). Recliquez ou appuyez sur Escape pour revenir.

La toolbar flottante est positionnée en bas-centre. Elle se divise en trois groupes séparés par des séparateurs visuels.

📷 [IMAGE — Barre d’outils annotée] Capture horizontale de la toolbar avec annotations pour chaque groupe et chaque icône

Pour ajouter du texte, des médias et du contenu structuré.

OutilRaccourciDescription
NoteNCarte de texte enrichi avec fond coloré
TexteETexte libre sans fond ni bordure (titres, annotations)
ImageIImage importée depuis votre ordinateur
LienUAperçu d’une URL avec favicon
FichierFFichier téléchargeable attaché
TâchesTListe de cases à cocher avec barre de progression

Pour organiser le Canvas et créer une hiérarchie.

OutilRaccourciDescription
ColonneCConteneur pour regrouper plusieurs éléments
TableauGPetit tableau de données avec colonnes typées
Canvas (lien)BLien vers un sous-Canvas
Kanban (lien)KLien vers un sous-Kanban
Page (lien)PLien vers une sous-Page

Pour relier visuellement et annoter à main levée.

OutilRaccourciDescription
FormeHRectangle, cercle, triangle ou étoile
LigneLTrait droit avec options de style
FlècheAConnecteur intelligent entre deux éléments
DessinDMode pinceau à main levée

💡 Les modes Flèche et Dessin sont des bascules : tant qu’ils sont activés, votre curseur change et chaque clic/trait crée un élément. Appuyez sur la touche correspondante (ou sur Escape) pour quitter le mode.

Une carte de texte avec fond coloré. Le format de base est de 300 × 200 pixels mais s’adapte automatiquement au contenu.

  • Créer : N ou clic sur l’outil Note
  • Éditer : double-cliquez pour entrer en mode édition, tapez votre texte
  • Formater : la barre d’édition apparaît au-dessus de la note (gras, italique, couleurs, listes, liens, blocs de code, etc.)
  • Personnaliser : couleur de fond via le panneau latéral droit

📷 [IMAGE — Note avec barre de formatage] Gros plan d’une note en édition avec menu flottant de formatage visible

Variante de la Note sans fond ni bordure. Idéal pour :

  • Des titres flottants dans le Canvas
  • Des annotations ou commentaires libres
  • Des étiquettes attachées à un schéma

Créer : E. Le même éditeur riche que la Note est disponible.

Une zone qui affiche une image.

  • Créer : I ou drag-drop directement depuis votre explorateur
  • Importer : cliquez sur la zone vide ou glissez-déposez. Formats acceptés : tous les formats image (image/*). Taille max : 20 Mo avant compression
  • Compression : les images sont automatiquement converties en WebP (qualité 80 %, max 1920 × 1920) pour réduire la taille
  • Lightbox : double-cliquez sur une image pour l’agrandir en plein écran (Escape ou clic pour fermer)
  • Personnaliser : couleur de fond et arrondi des coins

🎥 [VIDÉO — Drag-drop d’une image] Démo : glisser une image depuis l’explorateur de fichiers vers le Canvas

Affiche un aperçu d’une URL avec son favicon.

  • Créer : U
  • Configurer : ouvrez le panneau latéral pour saisir l’URL et un titre (optionnel). Le favicon est récupéré automatiquement
  • Ouvrir : clic sur l’icône externe → ouvre l’URL dans un nouvel onglet

Un fichier téléchargeable attaché à votre Canvas.

  • Créer : F
  • Ajouter : cliquez sur la zone pour ouvrir le sélecteur de fichier. Un icône-type s’affiche (PDF, Word, image, etc.)
  • Télécharger : clic sur l’élément → le fichier est téléchargé par les utilisateurs autorisés

Une liste de cases à cocher avec progression.

  • Créer : T
  • Ajouter une tâche : bouton + en bas de la liste
  • Cocher : clic sur la case
  • Éditer un libellé : double-clic
  • Réorganiser : glissez l’icône de poignée à gauche de chaque tâche
  • Supprimer une tâche : icône poubelle à droite
  • Barre de progression : automatique, affichée en haut (X / Y cochées)

📷 [IMAGE — Élément Tâches] Capture d’une liste Todo avec 5 tâches dont 3 cochées et barre de progression à 60 %

Un conteneur vertical qui regroupe d’autres éléments. Largeur fixe (350 px), hauteur variable.

  • Créer : C
  • Y placer des éléments : glissez-déposez des éléments dedans — ils deviennent enfants de la colonne
  • Déplacer la colonne : tous ses enfants suivent automatiquement
  • Replier : flèche en haut pour cacher visuellement les enfants
  • Titre : éditable en haut de la colonne

Les colonnes sont la manière de grouper des éléments dans un Canvas.

Une grille éditable (à ne pas confondre avec le projet de type Database).

  • Créer : G. Crée un tableau 3 colonnes / 4 lignes par défaut
  • Types de colonnes : texte, nombre, case à cocher, date, liste déroulante
  • Éditer une cellule : clic
  • Ajouter / supprimer ligne ou colonne : clic droit dans le tableau, ou panneau latéral
  • Redimensionner une colonne : glissez sa bordure

📷 [IMAGE — Tableau Canvas] Capture d’un tableau avec colonnes typées (texte, dates, cases à cocher)

Rectangle, cercle, triangle ou étoile.

  • Créer : H
  • Choisir le type : panneau latéral
  • Personnaliser : couleur de fond, couleur et épaisseur de bordure
  • Redimensionner : poignées aux coins (sans contrainte de ratio)

Un trait droit, avec ou sans tête de flèche.

  • Créer : L. Crée une ligne horizontale par défaut
  • Étirer : glissez les extrémités
  • Label : double-clic pour ajouter un texte sur la ligne
  • Style : solide, pointillée ou en tirets (panneau latéral)
  • Flèches : activer/désactiver les têtes au début ou à la fin
  • Connexion : si vous étirez l’extrémité sur un élément, la ligne s’y rattache visuellement

Connecteur intelligent entre deux éléments. Voir la section dédiée.

Tracé à main levée. Voir la section dédiée.

Un lien cliquable vers un autre tableau. Voir la section dédiée.

ActionComment
SélectionnerClic sur l’élément
Sélection multipleCtrl (Cmd sur Mac) + clic pour ajouter ou retirer
Boîte de sélectionGlissez sur le vide → un rectangle entoure tout ce qu’il touche
Tout désélectionnerClic sur le vide ou Escape

Un liseré bleu entoure les éléments sélectionnés.

  • Glisser-déposer simple : maintenez et bougez
  • Sélection multiple : tous les éléments sélectionnés se déplacent ensemble, en conservant leur disposition relative
  • Snap à la grille : si la grille est activée (bouton en bas à droite), les éléments s’alignent automatiquement sur des pas de 8 pixels
  • Poignées de coin : carrés bleus aux 4 coins quand un élément est sélectionné
  • Glissez une poignée pour redimensionner
  • Limites : chaque type d’élément a des tailles minimales et maximales (par exemple, une Note ne peut pas être réduite en-dessous de 200 px de large)

🎥 [VIDÉO — Sélection multiple et déplacement] Démo : tracé d’un rectangle de sélection autour de 4 éléments, déplacement groupé, redimensionnement d’une note

Faites un clic droit sur un élément pour ouvrir le menu contextuel :

CommandeEffet
Mettre au premier planL’élément passe au-dessus de tous les autres
Avancer d’un niveauPasse au-dessus de l’élément immédiatement supérieur
Reculer d’un niveauPasse en-dessous de l’élément immédiatement inférieur
Mettre à l’arrière-planPasse en-dessous de tous les autres

Si plusieurs éléments sont sélectionnés, leur ordre relatif est préservé.

Un élément verrouillé ne peut plus être déplacé ni redimensionné, mais reste cliquable et lisible. Utile pour fixer un fond, un cadre ou une image de référence.

  • Sélectionnez l’élément, appuyez sur Suppr (ou Backspace)
  • En sélection multiple, tout est supprimé d’un coup
  • Ctrl + Z annule la suppression

Le panneau latéral apparaît dès que vous sélectionnez un élément, ou dès que vous activez le mode dessin.

📷 [IMAGE — Panneau de personnalisation] Capture du panneau ouvert sur une Note sélectionnée, avec options de couleur, fond, formatage

Selon le type d’élément sélectionné, vous trouverez :

Type sélectionnéOptions disponibles
NoteCouleur de fond + formatage texte (gras, italique, taille, couleur, alignement)
TexteFormatage texte seul
ImageCouleur de fond, arrondi des coins
FormeFond, couleur et épaisseur de bordure, type (rectangle / cercle / triangle / étoile)
ColonneCouleur de fond
LigneStyle (solide / pointillé / tirets), épaisseur, couleur, flèches début/fin
FlècheAncrage début/fin (9 positions), type de tracé (droit / courbe / coude), têtes, animation, label
LienURL, titre, couleur de fond
FichierCouleur de fond
Sous-tableauCouleur de fond, icône
TâchesCouleur de fond
TableauOptions des colonnes (alignement, type, valeurs de liste), style d’en-tête
Dessin (mode actif)Pinceau (épaisseur, couleur), outil (pinceau / gomme)

Les flèches sont des connecteurs intelligents qui restent attachés à leurs éléments source et destination, même quand vous les déplacez.

🎥 [VIDÉO — Création d’une flèche] Démo : activation du mode flèche, hover sur élément (apparition des ancrages), clic source, clic destination, déplacement d’un élément (la flèche suit)

  1. Activez le mode flèche : A ou clic sur l’outil Flèche
  2. Survolez l’élément de départ9 points d’ancrage apparaissent (4 côtés + 4 coins + centre)
  3. Cliquez sur le point d’ancrage souhaité
  4. Survolez l’élément d’arrivée → idem
  5. Cliquez sur le point d’ancrage de destination
  6. La flèche est créée et reste connectée

📷 [IMAGE — Points d’ancrage] Gros plan d’un élément survolé en mode flèche avec les 9 points visibles

Sélectionnez la flèche puis ouvrez le panneau latéral :

  • Droit : ligne directe d’un point à l’autre
  • Courbe : courbe de Bézier élégante (recommandée pour les schémas conceptuels)
  • Coudé : angles droits, type schéma d’organisation
  • Style de trait : solide, pointillé, tirets
  • Couleur et épaisseur
  • Têtes : début et fin indépendants (aucune, triangle, triangle plein, losange, cercle, barre)
  • Animation : option animé pour un effet visuel de flux
  • Label : double-cliquez sur la flèche pour ajouter un texte centré sur le tracé

📷 [IMAGE — Variantes de flèches] Capture présentant côte à côte 4 flèches : droite, courbe, coudée, animée

  • Drag direct : glissez l’extrémité de la flèche vers un autre point ou élément
  • Panneau latéral : sélecteur des 9 positions pour chaque extrémité

La flèche est automatiquement supprimée — vous n’avez pas à nettoyer manuellement les connecteurs orphelins.

Le mode Dessin vous permet de tracer librement sur le Canvas, comme avec un stylo.

🎥 [VIDÉO — Dessin à main levée] Démo : activation mode dessin, choix d’épaisseur et couleur, tracé de cercles et flèches manuelles, gomme

Appuyez sur D ou cliquez sur l’outil Dessin. Le curseur devient une croix, et le panneau de personnalisation s’ouvre pour vous laisser choisir :

  • Outil : pinceau ou gomme
  • Couleur
  • Épaisseur

Cliquez-glissez sur le Canvas pour tracer. Relâchez : votre tracé est enregistré comme un élément Dessin.

Tant que le mode est actif, vos clics ne sélectionnent pas les éléments existants — vous pouvez dessiner par-dessus sans les déplacer.

Si un dessin est sélectionné quand vous tracez à nouveau, le nouveau trait s’ajoute au même élément. Cela permet d’enrichir progressivement une annotation sans empiler 50 éléments séparés.

Basculez l’outil sur Gomme : passez sur les traits pour les effacer. La gomme découpe les tracés (un long trait coupé en deux devient deux dessins séparés).

Appuyez sur D à nouveau ou sur Escape.

  • Déplacer : sélectionnez puis glissez (mode dessin désactivé)
  • Redimensionner : poignées de coin — tous les points sont mis à l’échelle proportionnellement

Le Canvas peut contenir des liens vers d’autres tableaux (Canvas, Kanban ou Page). C’est la manière de structurer un grand projet.

🖼️ [VISUEL — Hiérarchie de tableaux] Schéma arborescent : un Canvas principal “Projet” qui pointe vers sous-Kanban “Tâches”, sous-Canvas “Schémas archi”, sous-Page “Spec”

RaccourciType créé
BSous-Canvas
KSous-Kanban
PSous-Page

Une icône représentative est placée sur votre Canvas. Le nouveau tableau est vide et automatiquement rattaché au Canvas courant.

Cliquez (ou double-cliquez) sur l’élément sous-tableau : vous êtes redirigé vers ce nouveau tableau.

En haut de la page, un fil d’Ariane affiche votre position dans la hiérarchie :

Projet > Sous-Canvas > Détails architecture
  • Cliquez sur un parent pour y revenir
  • Le dernier élément (votre position actuelle) n’est pas cliquable

📷 [IMAGE — Breadcrumb] Capture du haut de l’écran avec un breadcrumb à 3 niveaux et le dernier nœud surligné

  • Un Canvas principal qui sert de carte mentale, avec des sous-Canvas, sous-Kanban et sous-Page pour chaque grand axe
  • Évitez d’aller au-delà de 3-4 niveaux d’imbrication (au-delà, naviguer devient pénible)
  • Utilisez des noms explicites : le breadcrumb ne montre que les noms
ToucheAction
NNouvelle Note
ENouveau Texte
INouvelle Image
UNouveau Lien
FNouveau Fichier
TNouvelles Tâches
CNouvelle Colonne
GNouveau Tableau
HNouvelle Forme
LNouvelle Ligne
BNouveau sous-Canvas
KNouveau sous-Kanban
PNouvelle sous-Page
AActiver / désactiver le mode Flèche
DActiver / désactiver le mode Dessin
RaccourciAction
Ctrl + clicSélection multiple
Suppr / BackspaceSupprimer la sélection
Espace + glisserPan du Canvas
EscapeDésélectionner / quitter un mode
RaccourciAction
Ctrl + Z (Cmd + Z)Annuler
Ctrl + Y (Cmd + Y)Refaire

Édition de texte (dans une Note ou un Texte)

Section titled “Édition de texte (dans une Note ou un Texte)”
RaccourciAction
Ctrl + BGras
Ctrl + IItalique
Ctrl + USouligné
EnterNouvelle ligne
EscapeQuitter l’édition

💡 Les raccourcis de création ne fonctionnent pas si vous êtes en train d’éditer du texte — c’est normal, vos lettres iraient dans le texte au lieu de créer des éléments. Appuyez d’abord sur Escape pour sortir de l’édition.

H-Board enregistre vos actions dans un historique local au Canvas.

ActionRaccourciBouton
AnnulerCtrl + ZBouton ↶ en bas-droite
RefaireCtrl + YBouton ↷ en bas-droite

L’historique couvre :

  • Création d’éléments
  • Suppression
  • Déplacement et redimensionnement
  • Changement d’ordre (z-index)
  • Modifications de contenu

⚠️ L’historique est local au Canvas et à votre session : il est effacé si vous rechargez la page. Pas de panique cependant — toutes vos modifications sont déjà enregistrées en continu sur le serveur.

Quand plusieurs personnes ouvrent le même Canvas, vous travaillez simultanément sans risque de conflit.

🎥 [VIDÉO — Collaboration temps réel] Démo split-screen : deux navigateurs côte à côte, modifications visibles instantanément, curseurs et sélections colorés

  • Avatars des participants dans l’en-tête
  • Curseurs distants : flèches colorées qui suivent les mouvements de souris des autres, avec leur nom
  • Sélections distantes : un liseré coloré entoure ce que les autres sélectionnent — chaque utilisateur a sa propre couleur
  • Modifications instantanées : les éléments créés/déplacés/édités par les autres apparaissent en temps réel

Un petit indicateur en haut affiche l’état :

  • 🟢 Connecté : tout va bien
  • 🟡 Synchronisation… : envoi en cours
  • 🔴 Hors ligne : connexion perdue (vos modifs locales seront poussées au retour)

H-Board utilise une technologie de synchronisation (CRDT) qui fusionne automatiquement les modifications de chacun. Vous n’avez jamais à choisir entre “ma version” et “la sienne”.

Vous pouvez exporter un Canvas pour le partager hors ligne ou l’archiver.

  1. Cliquez sur le bouton Exporter dans l’en-tête (icône téléchargement)
  2. Choisissez le format
  3. Cliquez sur Télécharger
FormatUsage
PNGCapture image du Canvas (pour insérer dans une présentation)
PDFRendu pages (impressions, archivage formel)
JSONDonnées brutes du projet (pour ré-importer plus tard, voir Premiers pas § Importer)

📷 [IMAGE — Modal export] Capture du modal d’export avec choix de format et bouton Télécharger

  • L’export PNG/PDF capture l’état actuel du Canvas dans sa zone visible. Pour un très grand Canvas, faites plusieurs captures partielles
  • Les éléments lourds (beaucoup d’images haute définition) allongent le temps d’export
  • L’export JSON ne contient pas les partages, commentaires ni l’historique

Selon votre rôle sur un Canvas partagé, les actions disponibles diffèrent :

ActionLecteurÉditeurAdmin
Voir le contenu
Naviguer (pan, zoom)
Exporter
Voir les curseurs et avatars
Créer / déplacer / supprimer des éléments
Modifier le contenu (texte, images…)
Annuler / refaire
Voir la barre d’outils
Partager / gérer les membres
Supprimer le Canvas✓ (et propriétaire)

Si un élément spécifique est verrouillé (cadenas), même un Éditeur ne peut pas le bouger — il faut le déverrouiller d’abord.

Voir le guide Partage (à venir) pour la gestion des invitations et des rôles.

  • Utilisez des couleurs pour signifier (rouge = urgent, vert = validé…) plutôt que pour décorer
  • Groupez les éléments liés dans des colonnes : ils restent ensemble quand vous réorganisez
  • Espacez suffisamment : un Canvas trop dense devient illisible. Préférez plusieurs sous-tableaux
  • Au-delà de 200 éléments sur un même Canvas, la fluidité commence à se dégrader. Découpez en sous-Canvas
  • Les images lourdes sont compressées mais restent significatives — limitez aux essentielles
  • Les dessins très longs (plusieurs centaines de points) sont simplifiés automatiquement, mais préférez des traits nets
  • Avant un atelier, partagez le Canvas et organisez l’espace : zones par thème, code couleur
  • Pendant l’atelier, chacun voit les sélections des autres — utilisez cette indication pour ne pas se marcher sur les pieds
  • Utilisez les flèches pour expliciter les liens entre idées : c’est plus clair que la proximité visuelle
  • Note centrale avec le sujet
  • Sous-thèmes disposés en étoile, reliés par des flèches
  • Couleurs différentes par branche
  • Quand une branche devient riche, créez un sous-Canvas

🖼️ [VISUEL — Exemple de mind map] Schéma type d’une mind map H-Board : 1 note centrale, 5 branches colorées, sous-notes

  • Formes pour les composants (rectangles = services, cercles = utilisateurs)
  • Flèches coudées entre composants
  • Labels sur les flèches pour préciser le type de relation
  • Couleurs par couche (front, back, base de données)

Mes modifications sont-elles sauvegardées automatiquement ? Oui, en continu. Aucune action manuelle n’est requise.

Pourquoi ma barre d’outils n’apparaît-elle pas ? Vous êtes probablement en mode lecture seule. Vérifiez votre rôle dans le modal de partage. Si vous êtes le propriétaire et que la toolbar manque, rechargez la page.

Comment annuler mon dernier mouvement ? Ctrl + Z (ou cliquez sur le bouton ↶ en bas-droite). Cela couvre déplacements, suppressions, modifications.

Une flèche est restée en place alors que j’ai supprimé son élément cible, est-ce normal ? Non : les flèches sont supprimées automatiquement quand un de leurs éléments liés disparaît. Rechargez la page ; sinon contactez le support.

Puis-je copier-coller des éléments entre deux Canvas ? Cette fonctionnalité n’est pas disponible actuellement. Astuce : créez un sous-Canvas et déplacez les éléments dedans, ou exportez/réimportez le projet entier.

Comment commenter ou annoter sans modifier le contenu ? H-Board ne propose pas (encore) de fil de commentaires natif. Astuce : utilisez des Notes avec une couleur spécifique (par exemple jaune fluo) dédiées aux commentaires.

Mon Canvas est très lent, que faire ? Vérifiez le nombre d’éléments (au-delà de 200, prévoyez un découpage). Sinon : fermez les autres onglets gourmands, réduisez le zoom, ou créez des sous-Canvas pour réduire la charge visible.

Puis-je exporter une partie seulement du Canvas ? Pas directement. Astuce : zoomez/recentrez sur la zone voulue, prenez une capture d’écran de votre système, ou faites un export PNG après recadrage.

Les images uploadées sont-elles publiques ? Non. Elles sont stockées avec les mêmes restrictions d’accès que le Canvas — seuls les membres autorisés y ont accès.

Le mode plein écran ne fonctionne pas, pourquoi ? Certains navigateurs (notamment en mode privé) bloquent l’API plein écran. Essayez en mode normal, ou utilisez F11 du navigateur en alternative.


Documentation H-Board v2 — Canvas · Juin 2026