> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Utiliser le canvas

> Visualisez et travaillez sur toutes les pages de votre application à la fois. Ajoutez des notes, dessins et images, collaborez avec votre équipe en temps réel et envoyez des idées directement au chat IA.

Le canvas vous permet de visualiser et travailler sur toutes les pages de votre application à la fois. Chaque page apparaît sous forme de cadre d'aperçu en direct sur un tableau infini que vous pouvez organiser, annoter et enrichir avec votre équipe. Tout est enregistré automatiquement au fur et à mesure que vous travaillez.

<Frame caption="Vue d'ensemble du canvas avec les cadres de pages de l'application">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-overview.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=2a18935f7466536853d4a827d2a62a39" alt="Le canvas affichant plusieurs cadres de pages d'application sur un tableau infini" width="1907" height="1074" data-path="images/canvas-overview.png" />
</Frame>

Utilisez le canvas pour planifier la mise en page de votre application, laisser des notes et commentaires pour vous-même ou votre équipe, esquisser des idées avec des dessins ou envoyer des instructions directement au chat IA pour mise en œuvre.

<Tip>
  Vous pouvez utiliser le mode **Edit** sur le canvas comme vous le feriez dans l'éditeur classique. Cliquez sur **Edit** dans la barre supérieure pour sélectionner et styliser des éléments sur n'importe quel cadre de page.
</Tip>

***

## Accéder au canvas

Pour accéder au canvas, ouvrez votre éditeur d'application et cliquez sur l'icône Canvas <Icon icon="grid-2" /> dans la barre supérieure.

<Frame caption="Accéder à votre canvas">
  <img src="https://mintcdn.com/base44/HMQ1t8hb_ML8CWxo/images/accessing-canvas.png?fit=max&auto=format&n=HMQ1t8hb_ML8CWxo&q=85&s=0df6b5c332b4c8c2021a0a999e9023ea" alt="Accéder au canvas" width="1912" height="1074" data-path="images/accessing-canvas.png" />
</Frame>

Lorsque vous ouvrez le canvas pour la première fois, il ajuste toutes les pages de votre application à la vue. Ensuite, votre niveau de zoom et votre position sont sauvegardés par appareil, de sorte que le canvas se rouvre à l'endroit où vous l'avez laissé.

***

## Collaborer sur le canvas

Plusieurs personnes peuvent travailler sur le canvas en même temps. Le curseur de chaque collaborateur apparaît comme un pointeur nommé lorsqu'il se déplace. Des contours colorés indiquent quels éléments chaque personne a sélectionnés.

<Frame caption="Collaboration en temps réel sur le canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-collaboration.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=eeae76cc4f076b4817a1d6d63c7e589c" alt="Plusieurs collaborateurs travaillant sur le canvas avec des curseurs nommés" width="949" height="857" data-path="images/canvas-collaboration.png" />
</Frame>

<Tip>
  Vous pouvez ajouter des collaborateurs à votre application depuis le haut de l'éditeur. [En savoir plus sur les collaborateurs](/Setting-up-your-app/Managing-access#inviting-collaborators-to-your-app)
</Tip>

***

## Gérer les cadres de pages

Chaque page de votre application apparaît sous forme de cadre sur le canvas, affichant un aperçu en direct de cette page.

<Frame caption="Redimensionner un cadre de page sur le canvas">
  <img src="https://mintcdn.com/base44/lRfN14qvv8YdMpqq/images/resizing-page.gif?s=0d1148c87511c87b983b8841a0b72b5a" alt="Redimensionnement de la page" width="926" height="728" data-path="images/resizing-page.gif" />
</Frame>

Vous pouvez effectuer plusieurs actions sur vos cadres de pages.

<AccordionGroup>
  <Accordion title="Déplacer une page sur le canvas">
    Cliquez d'abord sur le cadre pour le sélectionner, puis cliquez et faites glisser le cadre pour le déplacer où vous voulez sur le canvas.
  </Accordion>

  <Accordion title="Changer la vue (bureau, tablette, téléphone)">
    Chaque cadre dispose d'un menu déroulant de viewport en haut à droite de son en-tête. Cliquez dessus pour basculer entre **Desktop**, **Tablet** et **Phone** pour voir à quoi ressemble la page sur différentes tailles d'écran.

    <Frame>
      <img src="https://mintcdn.com/base44/GnNLayktD_WvyVoh/images/canvas-responsive.png?fit=max&auto=format&n=GnNLayktD_WvyVoh&q=85&s=768f9d43e6c3c83bd52b56a08b6e69a7" alt="Canvas Responsive" width="913" height="712" data-path="images/canvas-responsive.png" />
    </Frame>
  </Accordion>

  <Accordion title="Redimensionner un cadre de page">
    Cliquez sur le cadre pour le sélectionner. Des poignées de redimensionnement apparaissent sur les bords. Faites glisser n'importe quelle poignée pour ajuster la largeur et la hauteur du cadre.
  </Accordion>

  <Accordion title="Actualiser une page">
    Faites un clic droit sur le cadre et sélectionnez **Refresh** pour recharger l'aperçu de la page.

    <Frame>
      <img src="https://mintcdn.com/base44/GnNLayktD_WvyVoh/images/refresh-frame-canvas.png?fit=max&auto=format&n=GnNLayktD_WvyVoh&q=85&s=4aedac164bd2f2b1a683de3a48d2d740" alt="Refresh Frame Canvas" width="904" height="709" data-path="images/refresh-frame-canvas.png" />
    </Frame>
  </Accordion>
</AccordionGroup>

<Note>
  Les pages ne peuvent pas être supprimées depuis le canvas. Pour supprimer une page, demandez au chat IA de la supprimer pour vous.
</Note>

***

## Utiliser la barre d'outils du canvas

La barre d'outils sur le côté droit du canvas vous donne accès aux principaux outils.

<Frame caption="La barre d'outils du canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-toolbar.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4938faaebfd77c49540758fcd7521659" alt="La barre d'outils du canvas montrant les outils Select, Hand, Draw, Sticky note et Image" width="1912" height="1078" data-path="images/canvas-toolbar.png" />
</Frame>

Voici ce que vous pouvez faire avec la barre d'outils :

|                               | **Outil**       | **Raccourci** | **Action**                                            |
| ----------------------------- | --------------- | ------------- | ----------------------------------------------------- |
| <Icon icon="arrow-pointer" /> | **Select**      | V             | Sélectionner, déplacer et redimensionner des éléments |
| <Icon icon="hand" />          | **Hand**        | H             | Naviguer dans le canvas sans rien sélectionner        |
| <Icon icon="pencil" />        | **Draw**        | D             | Dessin à main levée                                   |
| <Icon icon="note-sticky" />   | **Sticky note** | N             | Ajouter des notes adhésives                           |
| <Icon icon="image" />         | **Image**       | I             | Ajouter des images                                    |

<Tip>
  Appuyez sur **Escape** à tout moment pour revenir à l'outil **Select**.
</Tip>

***

### Notes adhésives

Les notes adhésives sont la principale façon de laisser des idées, commentaires et instructions directement sur le canvas.

<Frame caption="Une note adhésive sur le canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-sticky-note.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=235d16fecb8241650611c663eb52c4d5" alt="Une note adhésive sur le canvas avec des options de statut, de couleur et de formatage" width="1273" height="999" data-path="images/canvas-sticky-note.png" />
</Frame>

En savoir plus sur les notes adhésives :

<AccordionGroup>
  <Accordion title="Ajouter une note adhésive">
    **Pour ajouter une note adhésive :**

    1. Cliquez sur l'outil **Sticky note** <Icon icon="note-sticky" /> dans la barre d'outils ou appuyez sur **N**.
    2. Cliquez n'importe où sur le canvas pour placer la note.
    3. Double-cliquez sur la note pour commencer à taper.

    L'avatar de la personne qui a créé la note apparaît en bas à gauche.
  </Accordion>

  <Accordion title="Personnaliser votre note">
    Lorsqu'une note adhésive est sélectionnée, une barre d'outils apparaît en dessous avec des options de formatage :

    * <Icon icon="circle" /> **Color** : choisissez une couleur de fond pour la note.
    * **Aa** **Font family** : choisissez parmi quatre styles : default, handwriting, mono ou serif.
    * **S** **Font size** : Small, Medium, Large ou Extra large.
    * **B** **Bold** : mettre le texte en gras.
    * <Icon icon="list" /> **Bullet list** : formater la note comme une liste à puces.
  </Accordion>

  <Accordion title="Changer le statut d'une note">
    Chaque note adhésive a un menu déroulant **Status** en haut. Cliquez dessus pour définir le statut :

    * To do (orange)
    * In progress (bleu)
    * Done (vert)
  </Accordion>

  <Accordion title="Connecter une note adhésive à une page">
    Connectez une note adhésive à un cadre de page pour montrer à quelle page elle se rapporte.

    **Pour connecter une note adhésive à une page :**

    1. Survolez la note pour révéler les poignées de connexion sur ses bords.
    2. Faites glisser depuis une poignée jusqu'au cadre de page que vous souhaitez connecter.
  </Accordion>

  <Accordion title="Envoyer une note au chat IA">
    Une fois que vous avez écrit une note, vous pouvez envoyer son contenu au chat IA pour mise en œuvre. Survolez ou sélectionnez la note, puis cliquez sur **Send to chat** en bas à droite de la note.

    * Si la note est connectée à un cadre de page, l'IA applique la modification à cette page spécifique.
    * Si la note n'est pas connectée à une page, l'IA décide quelle page mettre à jour en fonction du contenu de la note.
  </Accordion>
</AccordionGroup>

***

### Dessins

L'outil de dessin vous permet d'esquisser à main levée n'importe où sur le canvas.

<Frame caption="Dessin à main levée sur le canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-drawings.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=52c7305fa90a1cc74f4aea7a1c7739d2" alt="Dessins à main levée sur le canvas avec contrôles de couleur et d'épaisseur du trait" width="1138" height="982" data-path="images/canvas-drawings.png" />
</Frame>

En savoir plus sur le dessin sur le canvas :

<AccordionGroup>
  <Accordion title="Dessiner sur le canvas">
    **Pour dessiner sur le canvas :**

    1. Cliquez sur l'outil **Draw** <Icon icon="pencil" /> dans la barre d'outils ou appuyez sur **D**.
    2. Cliquez et faites glisser sur le canvas pour dessiner.
  </Accordion>

  <Accordion title="Personnaliser le dessin">
    Lorsque l'outil de dessin est actif, vous pouvez le personnaliser :

    * **Stroke color** <Icon icon="circle" /> : Cliquez sur le dessin pour ouvrir le sélecteur de couleurs et choisir votre couleur de dessin, ou entrez une valeur hex directement.
    * **Stroke weight** <Icon icon="bars" /> : Cliquez sur le dessin et faites glisser le curseur pour ajuster l'épaisseur de votre trait.
    * **Flip** : Faites un clic droit sur un dessin et sélectionnez **Flip horizontal** ou **Flip vertical**, ou utilisez les raccourcis **⇧H** et **⇧V**.
  </Accordion>
</AccordionGroup>

***

### Images

Vous pouvez ajouter des images au canvas depuis plusieurs sources. Les images sont placées au centre de votre vue actuelle.

<Frame caption="Une image sur le canvas avec les options de la barre d'outils">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-images.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=a322bd1e27b52238b653448608849408" alt="Une image sur le canvas montrant la barre d'outils Replace image, Crop et Border" width="779" height="805" data-path="images/canvas-images.png" />
</Frame>

En savoir plus sur l'ajout d'images au canvas :

<AccordionGroup>
  <Accordion title="Ajouter une image">
    **Pour ajouter une image :**

    1. Cliquez sur l'outil **Image** dans la barre d'outils ou appuyez sur **I**.
    2. Choisissez d'où récupérer l'image :
       * **Upload from computer** : Sélectionnez un fichier depuis votre appareil.
       * **Import from Drive** : Choisissez un fichier depuis votre Google Drive connecté.
       * **Add from file library** : Choisissez parmi les ressources existantes de votre application.
  </Accordion>

  <Accordion title="Personnaliser une image">
    Sélectionnez l'image pour accéder à la barre d'outils en dessous :

    * **Replace image :** Remplacer l'image par une autre.
    * **Crop :** Recadrer l'image.
    * **Border :** Ajouter ou ajuster une bordure autour de l'image.
    * **Flip :** Faites un clic droit pour retourner l'image horizontalement ou verticalement.
  </Accordion>
</AccordionGroup>

***

### Actions du clic droit

Faites un clic droit sur n'importe quelle note adhésive, dessin ou image pour ouvrir son menu contextuel. Les actions suivantes sont disponibles :

| Action                              | Raccourci clavier   |
| ----------------------------------- | ------------------- |
| Cut                                 | ⌘X                  |
| Copy                                | ⌘C                  |
| Paste                               | ⌘V                  |
| Paste to replace                    | ⇧⌘R                 |
| Duplicate                           | ⌘D                  |
| Delete                              | Delete ou Backspace |
| Bring to front                      | ]                   |
| Send to back                        | \[                  |
| Flip horizontal (dessins et images) | ⇧H                  |
| Flip vertical (dessins et images)   | ⇧V                  |
| Lock / Unlock                       | ⇧⌘L                 |

***

## Ajouter des flèches

Vous pouvez connecter deux éléments quelconques sur le canvas avec une flèche pour montrer des relations, par exemple relier une note adhésive à la page à laquelle elle se réfère.

<Frame caption="Une flèche reliant une note adhésive à un cadre de page">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-arrows.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=768c18d1d9c5592e3133519ff4f75180" alt="Une flèche dessinée d'une note adhésive vers un cadre de page sur le canvas" width="909" height="770" data-path="images/canvas-arrows.png" />
</Frame>

**Pour créer une flèche :**

1. Survolez un élément pour révéler les poignées de connexion sur ses bords.
2. Faites glisser depuis une poignée vers un autre élément.

<Tip>
  Pour supprimer une flèche, sélectionnez-la et appuyez sur **Delete** sur votre clavier.
</Tip>

***

## Verrouiller des éléments

Verrouiller un élément empêche quiconque de le déplacer, redimensionner ou modifier jusqu'à ce qu'il soit déverrouillé. Cela aide à éviter les conflits lorsque plusieurs personnes travaillent sur le même canvas. Vous pouvez verrouiller des notes adhésives, des dessins et des images.

<Frame caption="Verrouiller un élément sur le canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-locking.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4ec7808f626b74b50f3eb4492be2b046" alt="Menu du clic droit montrant l'option Lock sur une note adhésive" width="889" height="755" data-path="images/canvas-locking.png" />
</Frame>

**Pour verrouiller ou déverrouiller un élément :**

* Faites un clic droit sur l'élément et sélectionnez **Lock** ou **Unlock**.
* Ou sélectionnez l'élément et appuyez sur **⇧⌘L**.

***

## Annuler et rétablir les modifications

Vous pouvez annuler et rétablir vos récentes modifications du canvas à l'aide de raccourcis clavier ou des boutons d'annulation/rétablissement qui apparaissent dans la barre d'outils lorsqu'il y a de l'historique à parcourir.

L'annulation et le rétablissement couvrent la plupart des actions du canvas : créer, déplacer, redimensionner, modifier, supprimer, verrouiller et connecter des éléments.

| Action | Mac | Windows                |
| ------ | --- | ---------------------- |
| Undo   | ⌘Z  | Ctrl+Z                 |
| Redo   | ⇧⌘Z | Ctrl+Shift+Z ou Ctrl+Y |

<Note>
  L'annulation et le rétablissement sont personnels. Votre historique est distinct de celui de vos collaborateurs, donc annuler une modification ne fait qu'inverser vos propres modifications, pas les leurs. Le canvas conserve jusqu'à 50 étapes d'historique.
</Note>

***

## Zoom et navigation

La barre de zoom se trouve en bas à droite du canvas.

| Contrôle        | Raccourci | Action                                                                    |
| --------------- | --------- | ------------------------------------------------------------------------- |
| **Zoom to fit** | ⌘1        | Ajuster tout le canvas à la vue                                           |
| **−**           | ⌘-        | Zoom arrière d'un cran                                                    |
| Pourcentage     |           | Cliquez pour ouvrir un menu déroulant avec les niveaux de zoom prédéfinis |
| **+**           | ⌘+ ou ⌘=  | Zoom avant d'un cran                                                      |
|                 | ⌘0        | Réinitialiser à 100 %                                                     |

<Note>Cette page a été traduite à l'aide de l'IA. Pour les informations les plus précises et à jour, consultez la [version anglaise](/). </Note>