> ## 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.

# Usar el canvas

> Visualiza y trabaja en todas las páginas de tu app a la vez. Añade notas, dibujos e imágenes, colabora con tu equipo en tiempo real y envía ideas directo al chat de IA.

El canvas te permite ver y trabajar en todas las páginas de tu app a la vez. Cada página aparece como un marco con preview en vivo en un tablero infinito que puedes organizar, anotar y construir junto con tu equipo. Todo se guarda automáticamente mientras trabajas.

<Frame caption="Vista general del canvas con marcos de páginas de la app">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-overview.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=2a18935f7466536853d4a827d2a62a39" alt="The canvas showing multiple app page frames on an infinite board" width="1907" height="1074" data-path="images/canvas-overview.png" />
</Frame>

Usa el canvas para planear el layout de tu app, dejar notas y feedback para ti o tu equipo, esbozar ideas con dibujos o enviar instrucciones directo al chat de IA para implementación.

<Tip>
  Puedes usar el modo **Edit** en el canvas igual que en el editor regular. Haz clic en **Edit** en la barra superior para seleccionar y estilizar elementos en cualquier marco de página.
</Tip>

***

## Acceder al canvas

Para acceder al canvas, abre el editor de tu app y haz clic en el ícono de Canvas <Icon icon="grid-2" /> en la barra superior.

<Frame caption="Accediendo a tu 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="Accessing Canvas" width="1912" height="1074" data-path="images/accessing-canvas.png" />
</Frame>

Cuando abres el canvas por primera vez, ajusta todas las páginas de tu app a la vista. Después de eso, tu nivel de zoom y posición se guardan por dispositivo, así el canvas reabre donde lo dejaste.

***

## Colaborar en el canvas

Varias personas pueden trabajar en el canvas al mismo tiempo. El cursor de cada colaborador aparece como un puntero con nombre al moverse. Los contornos de color muestran qué elementos ha seleccionado cada persona.

<Frame caption="Colaboración en tiempo real en el canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-collaboration.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=eeae76cc4f076b4817a1d6d63c7e589c" alt="Multiple collaborators working on the canvas with named cursors" width="949" height="857" data-path="images/canvas-collaboration.png" />
</Frame>

<Tip>
  Puedes añadir colaboradores a tu app desde la parte superior del editor. [Aprende más sobre colaboradores](/Setting-up-your-app/Managing-access#inviting-collaborators-to-your-app)
</Tip>

***

## Gestionar los marcos de página

Cada página de tu app aparece como un marco en el canvas, mostrando un preview en vivo de esa página.

<Frame caption="Redimensionando un marco de página en el canvas">
  <img src="https://mintcdn.com/base44/lRfN14qvv8YdMpqq/images/resizing-page.gif?s=0d1148c87511c87b983b8841a0b72b5a" alt="Resizing Page" width="926" height="728" data-path="images/resizing-page.gif" />
</Frame>

Puedes hacer varias acciones en tus marcos de página.

<AccordionGroup>
  <Accordion title="Mover una página en el canvas">
    Haz clic en el marco para seleccionarlo primero, luego haz clic y arrástralo para moverlo a donde quieras en el canvas.
  </Accordion>

  <Accordion title="Cambiar la vista (escritorio, tablet, teléfono)">
    Cada marco tiene un desplegable de viewport arriba a la derecha en su encabezado. Haz clic para cambiar entre **Desktop**, **Tablet** y **Phone** para ver cómo se ve la página en distintos tamaños de pantalla.

    <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="Redimensionar un marco de página">
    Haz clic en el marco para seleccionarlo. Aparecen tiradores de redimensión en los bordes. Arrastra cualquier tirador para ajustar el ancho y alto del marco.
  </Accordion>

  <Accordion title="Refrescar una página">
    Haz clic derecho en el marco y selecciona **Refresh** para recargar el preview de la página.

    <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>
  Las páginas no se pueden eliminar desde el canvas. Para quitar una página, pide al chat de IA que la elimine por ti.
</Note>

***

## Usar la barra de herramientas del canvas

La barra de herramientas a la derecha del canvas te da acceso a las herramientas principales.

<Frame caption="La barra de herramientas del canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-toolbar.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4938faaebfd77c49540758fcd7521659" alt="The canvas toolbar showing Select, Hand, Draw, Sticky note, and Image tools" width="1912" height="1078" data-path="images/canvas-toolbar.png" />
</Frame>

Mira qué puedes hacer con la barra de herramientas:

|                               | **Herramienta** | **Atajo** | **Qué hace**                                  |
| ----------------------------- | --------------- | --------- | --------------------------------------------- |
| <Icon icon="arrow-pointer" /> | **Select**      | V         | Selecciona, mueve y redimensiona elementos    |
| <Icon icon="hand" />          | **Hand**        | H         | Desplázate por el canvas sin seleccionar nada |
| <Icon icon="pencil" />        | **Draw**        | D         | Dibujo a mano alzada                          |
| <Icon icon="note-sticky" />   | **Sticky note** | N         | Añade notas adhesivas                         |
| <Icon icon="image" />         | **Image**       | I         | Añade imágenes                                |

<Tip>
  Presiona **Escape** en cualquier momento para volver a la herramienta **Select**.
</Tip>

***

### Notas adhesivas

Las notas adhesivas son la forma principal de dejar ideas, feedback e instrucciones directamente en el canvas.

<Frame caption="Una nota adhesiva en el canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-sticky-note.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=235d16fecb8241650611c663eb52c4d5" alt="A sticky note on the canvas with status, color, and formatting options" width="1273" height="999" data-path="images/canvas-sticky-note.png" />
</Frame>

Aprende más sobre notas adhesivas:

<AccordionGroup>
  <Accordion title="Añadir una nota adhesiva">
    **Para añadir una nota adhesiva:**

    1. Haz clic en la herramienta **Sticky note** <Icon icon="note-sticky" /> en la barra de herramientas o presiona **N**.
    2. Haz clic en cualquier parte del canvas para colocar la nota.
    3. Haz doble clic en la nota para empezar a escribir.

    El avatar de quien creó la nota aparece abajo a la izquierda.
  </Accordion>

  <Accordion title="Personalizar tu nota">
    Cuando una nota adhesiva está seleccionada, aparece una barra debajo con opciones de formato:

    * <Icon icon="circle" /> **Color**: elige un color de fondo para la nota.
    * **Aa** **Familia de fuente**: elige entre cuatro estilos: default, handwriting, mono o serif.
    * **S** **Tamaño de fuente**: Small, Medium, Large o Extra large.
    * **B** **Negrita**: pon el texto en negrita.
    * <Icon icon="list" /> **Lista con viñetas**: da formato de lista con viñetas a la nota.
  </Accordion>

  <Accordion title="Cambiar el estado de una nota">
    Cada nota adhesiva tiene un desplegable **Status** en la parte superior. Haz clic para definir el estado:

    * To do (naranja)
    * In progress (azul)
    * Done (verde)
  </Accordion>

  <Accordion title="Conectar una nota adhesiva a una página">
    Conecta una nota adhesiva a un marco de página para mostrar a qué página se refiere.

    **Para conectar una nota adhesiva a una página:**

    1. Pasa el cursor sobre la nota para revelar los tiradores de conexión en sus bordes.
    2. Arrastra desde un tirador hasta el marco de página al que quieres conectarla.
  </Accordion>

  <Accordion title="Enviar una nota al chat de IA">
    Una vez que escribes una nota, puedes enviar su contenido al chat de IA para implementación. Pasa el cursor o selecciona la nota, luego haz clic en **Send to chat** abajo a la derecha de la nota.

    * Si la nota está conectada a un marco de página, la IA aplica el cambio a esa página específica.
    * Si la nota no está conectada a una página, la IA decide qué página actualizar según el contenido de la nota.
  </Accordion>
</AccordionGroup>

***

### Dibujos

La herramienta de dibujo te permite esbozar a mano alzada en cualquier parte del canvas.

<Frame caption="Dibujo a mano alzada en el canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-drawings.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=52c7305fa90a1cc74f4aea7a1c7739d2" alt="Freehand drawings on the canvas with stroke color and weight controls" width="1138" height="982" data-path="images/canvas-drawings.png" />
</Frame>

Aprende más sobre dibujar en el canvas:

<AccordionGroup>
  <Accordion title="Dibujar en el canvas">
    **Para dibujar en el canvas:**

    1. Haz clic en la herramienta **Draw** <Icon icon="pencil" /> en la barra o presiona **D**.
    2. Haz clic y arrastra en el canvas para dibujar.
  </Accordion>

  <Accordion title="Personalizar el dibujo">
    Cuando la herramienta de dibujo está activa, puedes personalizarla:

    * **Color del trazo** <Icon icon="circle" />: Haz clic en el dibujo para abrir el selector de color y elegir tu color, o ingresa un valor hex directamente.
    * **Grosor del trazo** <Icon icon="bars" />: Haz clic en el dibujo y arrastra el slider para ajustar el grosor de tu trazo.
    * **Voltear**: Haz clic derecho en un dibujo y selecciona **Flip horizontal** o **Flip vertical**, o usa los atajos **⇧H** y **⇧V**.
  </Accordion>
</AccordionGroup>

***

### Imágenes

Puedes añadir imágenes al canvas desde varias fuentes. Las imágenes se ubican en el centro de tu vista actual.

<Frame caption="Una imagen en el canvas con opciones de barra de herramientas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-images.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=a322bd1e27b52238b653448608849408" alt="An image on the canvas showing the Replace image, Crop, and Border toolbar" width="779" height="805" data-path="images/canvas-images.png" />
</Frame>

Aprende más sobre añadir imágenes al canvas:

<AccordionGroup>
  <Accordion title="Añadir una imagen">
    **Para añadir una imagen:**

    1. Haz clic en la herramienta **Image** en la barra o presiona **I**.
    2. Elige de dónde obtener la imagen:
       * **Upload from computer**: Selecciona un archivo de tu dispositivo.
       * **Import from Drive**: Elige un archivo de tu Google Drive conectado.
       * **Add from file library**: Elige entre los activos existentes de tu app.
  </Accordion>

  <Accordion title="Personalizar una imagen">
    Selecciona la imagen para acceder a la barra debajo:

    * **Replace image:** Cambia la imagen por otra.
    * **Crop:** Recorta la imagen.
    * **Border:** Añade o ajusta un borde alrededor de la imagen.
    * **Flip:** Haz clic derecho para voltear la imagen horizontal o verticalmente.
  </Accordion>
</AccordionGroup>

***

### Acciones con clic derecho

Haz clic derecho en cualquier nota adhesiva, dibujo o imagen para abrir su menú contextual. Las siguientes acciones están disponibles:

| Acción                                  | Atajo de teclado   |
| --------------------------------------- | ------------------ |
| Cortar                                  | ⌘X                 |
| Copiar                                  | ⌘C                 |
| Pegar                                   | ⌘V                 |
| Pegar para reemplazar                   | ⇧⌘R                |
| Duplicar                                | ⌘D                 |
| Eliminar                                | Delete o Backspace |
| Traer al frente                         | ]                  |
| Enviar atrás                            | \[                 |
| Voltear horizontal (dibujos e imágenes) | ⇧H                 |
| Voltear vertical (dibujos e imágenes)   | ⇧V                 |
| Bloquear / Desbloquear                  | ⇧⌘L                |

***

## Añadir flechas

Puedes conectar cualquier par de elementos en el canvas con una flecha para mostrar relaciones, por ejemplo enlazando una nota adhesiva con la página a la que se refiere.

<Frame caption="Una flecha conectando una nota adhesiva con un marco de página">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-arrows.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=768c18d1d9c5592e3133519ff4f75180" alt="An arrow drawn from a sticky note to a page frame on the canvas" width="909" height="770" data-path="images/canvas-arrows.png" />
</Frame>

**Para crear una flecha:**

1. Pasa el cursor sobre un elemento para revelar los tiradores de conexión en sus bordes.
2. Arrastra desde un tirador hasta otro elemento.

<Tip>
  Para quitar una flecha, selecciónala y presiona **Delete** en tu teclado.
</Tip>

***

## Bloquear elementos

Bloquear un elemento evita que alguien lo mueva, redimensione o edite hasta que se desbloquee. Esto ayuda a evitar conflictos cuando varias personas trabajan en el mismo canvas. Puedes bloquear notas adhesivas, dibujos e imágenes.

<Frame caption="Bloqueando un elemento en el canvas">
  <img src="https://mintcdn.com/base44/hTbrmqc3FTDlyCSH/images/canvas-locking.png?fit=max&auto=format&n=hTbrmqc3FTDlyCSH&q=85&s=4ec7808f626b74b50f3eb4492be2b046" alt="Right-click menu showing the Lock option on a sticky note" width="889" height="755" data-path="images/canvas-locking.png" />
</Frame>

**Para bloquear o desbloquear un elemento:**

* Haz clic derecho en el elemento y selecciona **Lock** o **Unlock**.
* O selecciona el elemento y presiona **⇧⌘L**.

***

## Deshacer y rehacer cambios

Puedes deshacer y rehacer tus ediciones recientes del canvas usando atajos de teclado o los botones de deshacer/rehacer que aparecen en la barra cuando hay historial.

Deshacer y rehacer cubren la mayoría de acciones del canvas: crear, mover, redimensionar, editar, eliminar, bloquear y conectar elementos.

| Acción   | Mac | Windows               |
| -------- | --- | --------------------- |
| Deshacer | ⌘Z  | Ctrl+Z                |
| Rehacer  | ⇧⌘Z | Ctrl+Shift+Z o Ctrl+Y |

<Note>
  Deshacer y rehacer son personales. Tu historial es independiente del de tus colaboradores, así que deshacer un cambio solo revierte tus propias ediciones, no las suyas. El canvas conserva hasta 50 pasos de historial.
</Note>

***

## Zoom y navegación

La barra de zoom está abajo a la derecha del canvas.

| Control         | Atajo   | Acción                                                              |
| --------------- | ------- | ------------------------------------------------------------------- |
| **Zoom to fit** | ⌘1      | Ajusta todo el canvas a la vista                                    |
| **−**           | ⌘-      | Reduce zoom un paso                                                 |
| Porcentaje      |         | Haz clic para abrir un desplegable con niveles de zoom predefinidos |
| **+**           | ⌘+ o ⌘= | Aumenta zoom un paso                                                |
|                 | ⌘0      | Restablece al 100%                                                  |

<Note>Esta página se tradujo con IA. Para información más precisa y actualizada, consulta la [versión en inglés](/). </Note>