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

# Usando o canvas

> Visualize e trabalhe em todas as páginas da sua aplicação ao mesmo tempo. Adicione notas, desenhos e imagens, colabore com sua equipe em tempo real e envie ideias direto para o chat de IA.

O canvas permite visualizar e trabalhar em todas as páginas da sua aplicação ao mesmo tempo. Cada página aparece como um frame de pré-visualização ao vivo em um quadro infinito que você pode organizar, anotar e construir junto com sua equipe. Tudo é salvo automaticamente conforme você trabalha.

<Frame caption="Visão geral do canvas com frames de páginas da aplicação">
  <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>

Use o canvas para planejar o layout da sua aplicação, deixar notas e feedback para você ou sua equipe, esboçar ideias com desenhos ou enviar instruções direto para o chat de IA para implementação.

<Tip>
  Você pode usar o modo **Edit** no canvas como faria no editor normal. Clique em **Edit** na barra superior para selecionar e estilizar elementos em qualquer frame de página.
</Tip>

***

## Acessando o canvas

Para acessar o canvas, abra o editor da sua aplicação e clique no ícone Canvas <Icon icon="grid-2" /> na barra superior.

<Frame caption="Acessando o 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>

Ao abrir o canvas pela primeira vez, ele encaixa todas as páginas da sua aplicação na visualização. Depois disso, seu nível de zoom e posição são salvos por dispositivo, então o canvas reabre onde você parou.

***

## Colaborando no canvas

Várias pessoas podem trabalhar no canvas ao mesmo tempo. O cursor de cada colaborador aparece como um ponteiro identificado conforme se movimentam. Contornos coloridos mostram quais elementos cada pessoa selecionou.

<Frame caption="Colaboração em tempo real no 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>
  Você pode adicionar colaboradores à sua aplicação pelo topo do editor. [Saiba mais sobre colaboradores](/Setting-up-your-app/Managing-access#inviting-collaborators-to-your-app)
</Tip>

***

## Gerenciando os frames de página

Cada página da sua aplicação aparece como um frame no canvas, mostrando uma pré-visualização ao vivo dessa página.

<Frame caption="Redimensionando um frame de página no 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>

Você pode executar várias ações nos frames de página.

<AccordionGroup>
  <Accordion title="Movendo uma página no canvas">
    Clique no frame para selecioná-lo primeiro, depois clique e arraste o frame para movê-lo onde quiser no canvas.
  </Accordion>

  <Accordion title="Mudando a visualização (desktop, tablet, telefone)">
    Cada frame tem um dropdown de viewport no canto superior direito do cabeçalho. Clique para alternar entre **Desktop**, **Tablet** e **Phone** para ver como a página fica em diferentes tamanhos de tela.

    <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="Redimensionando um frame de página">
    Clique no frame para selecioná-lo. Alças de redimensionamento aparecem nas bordas. Arraste qualquer alça para ajustar a largura e a altura do frame.
  </Accordion>

  <Accordion title="Recarregando uma página">
    Clique com o botão direito no frame e selecione **Refresh** para recarregar a pré-visualização da 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>
  Páginas não podem ser excluídas pelo canvas. Para remover uma página, peça ao chat de IA para excluí-la por você.
</Note>

***

## Usando a barra de ferramentas do canvas

A barra de ferramentas no lado direito do canvas dá acesso às principais ferramentas.

<Frame caption="A barra de ferramentas do 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>

Veja o que pode fazer com a barra de ferramentas:

|                               | **Ferramenta**  | **Atalho** | **O que faz**                               |
| ----------------------------- | --------------- | ---------- | ------------------------------------------- |
| <Icon icon="arrow-pointer" /> | **Select**      | V          | Selecionar, mover e redimensionar elementos |
| <Icon icon="hand" />          | **Hand**        | H          | Navegar pelo canvas sem selecionar nada     |
| <Icon icon="pencil" />        | **Draw**        | D          | Desenho à mão livre                         |
| <Icon icon="note-sticky" />   | **Sticky note** | N          | Adicionar notas adesivas                    |
| <Icon icon="image" />         | **Image**       | I          | Adicionar imagens                           |

<Tip>
  Pressione **Escape** a qualquer momento para voltar à ferramenta **Select**.
</Tip>

***

### Notas adesivas

As notas adesivas são a principal forma de deixar ideias, feedback e instruções direto no canvas.

<Frame caption="Uma nota adesiva no 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>

Saiba mais sobre as notas adesivas:

<AccordionGroup>
  <Accordion title="Adicionando uma nota adesiva">
    **Para adicionar uma nota adesiva:**

    1. Clique na ferramenta **Sticky note** <Icon icon="note-sticky" /> na barra de ferramentas ou pressione **N**.
    2. Clique em qualquer lugar do canvas para posicionar a nota.
    3. Dê um duplo clique na nota para começar a digitar.

    O avatar da pessoa que criou a nota aparece no canto inferior esquerdo.
  </Accordion>

  <Accordion title="Personalizando sua nota">
    Quando uma nota adesiva é selecionada, uma barra de ferramentas aparece abaixo com opções de formatação:

    * <Icon icon="circle" /> **Color**: escolha uma cor de fundo para a nota.
    * **Aa** **Font family**: escolha entre quatro estilos: default, handwriting, mono ou serif.
    * **S** **Font size**: Small, Medium, Large ou Extra large.
    * **B** **Bold**: deixar o texto em negrito.
    * <Icon icon="list" /> **Bullet list**: formatar a nota como lista com marcadores.
  </Accordion>

  <Accordion title="Mudando o status de uma nota">
    Cada nota adesiva tem um dropdown **Status** no topo. Clique para definir o status:

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

  <Accordion title="Conectando uma nota adesiva a uma página">
    Conecte uma nota adesiva a um frame de página para mostrar a qual página se refere.

    **Para conectar uma nota adesiva a uma página:**

    1. Passe o mouse sobre a nota para revelar as alças de conexão nas bordas.
    2. Arraste de uma alça até o frame de página que deseja conectar.
  </Accordion>

  <Accordion title="Enviando uma nota para o chat de IA">
    Após escrever uma nota, você pode enviar seu conteúdo para o chat de IA para implementação. Passe o mouse ou selecione a nota e clique em **Send to chat** no canto inferior direito da nota.

    * Se a nota está conectada a um frame de página, a IA aplica a mudança àquela página específica.
    * Se a nota não está conectada a uma página, a IA decide qual página atualizar com base no conteúdo da nota.
  </Accordion>
</AccordionGroup>

***

### Desenhos

A ferramenta de desenho permite esboçar à mão livre em qualquer lugar do canvas.

<Frame caption="Desenho à mão livre no 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>

Saiba mais sobre desenhar no canvas:

<AccordionGroup>
  <Accordion title="Desenhando no canvas">
    **Para desenhar no canvas:**

    1. Clique na ferramenta **Draw** <Icon icon="pencil" /> na barra de ferramentas ou pressione **D**.
    2. Clique e arraste no canvas para desenhar.
  </Accordion>

  <Accordion title="Personalizando o desenho">
    Quando a ferramenta de desenho está ativa, você pode personalizá-la:

    * **Stroke color** <Icon icon="circle" />: Clique no desenho para abrir o seletor de cores e escolha sua cor de desenho, ou insira um valor hex diretamente.
    * **Stroke weight** <Icon icon="bars" />: Clique no desenho e arraste o slider para ajustar a espessura do traço.
    * **Flip**: Clique com o botão direito em um desenho e selecione **Flip horizontal** ou **Flip vertical**, ou use os atalhos **⇧H** e **⇧V**.
  </Accordion>
</AccordionGroup>

***

### Imagens

Você pode adicionar imagens ao canvas a partir de várias fontes. As imagens são posicionadas no centro da sua visualização atual.

<Frame caption="Uma imagem no canvas com opções da barra de ferramentas">
  <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>

Saiba mais sobre adicionar imagens ao canvas:

<AccordionGroup>
  <Accordion title="Adicionando uma imagem">
    **Para adicionar uma imagem:**

    1. Clique na ferramenta **Image** na barra de ferramentas ou pressione **I**.
    2. Escolha de onde obter a imagem:
       * **Upload from computer**: Selecione um arquivo do seu dispositivo.
       * **Import from Drive**: Escolha um arquivo do seu Google Drive conectado.
       * **Add from file library**: Escolha entre os assets existentes da sua aplicação.
  </Accordion>

  <Accordion title="Personalizando uma imagem">
    Selecione a imagem para acessar a barra de ferramentas abaixo dela:

    * **Replace image:** Troque a imagem por outra.
    * **Crop:** Corte a imagem.
    * **Border:** Adicione ou ajuste uma borda ao redor da imagem.
    * **Flip:** Clique com o botão direito para inverter a imagem na horizontal ou vertical.
  </Accordion>
</AccordionGroup>

***

### Ações com clique direito

Clique com o botão direito em qualquer nota adesiva, desenho ou imagem para abrir o menu de contexto. As seguintes ações estão disponíveis:

| Ação                                 | Atalho de teclado   |
| ------------------------------------ | ------------------- |
| Cut                                  | ⌘X                  |
| Copy                                 | ⌘C                  |
| Paste                                | ⌘V                  |
| Paste to replace                     | ⇧⌘R                 |
| Duplicate                            | ⌘D                  |
| Delete                               | Delete ou Backspace |
| Bring to front                       | ]                   |
| Send to back                         | \[                  |
| Flip horizontal (desenhos e imagens) | ⇧H                  |
| Flip vertical (desenhos e imagens)   | ⇧V                  |
| Lock / Unlock                        | ⇧⌘L                 |

***

## Adicionando setas

Você pode conectar dois elementos quaisquer no canvas com uma seta para mostrar relações, por exemplo ligando uma nota adesiva à página a que ela se refere.

<Frame caption="Uma seta conectando uma nota adesiva a um frame 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 criar uma seta:**

1. Passe o mouse sobre um elemento para revelar as alças de conexão nas bordas.
2. Arraste de uma alça até outro elemento.

<Tip>
  Para remover uma seta, selecione-a e pressione **Delete** no teclado.
</Tip>

***

## Bloqueando elementos

Bloquear um elemento impede que qualquer pessoa o mova, redimensione ou edite até ser desbloqueado. Isso ajuda a evitar conflitos quando várias pessoas trabalham no mesmo canvas. Você pode bloquear notas adesivas, desenhos e imagens.

<Frame caption="Bloqueando um elemento no 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 ou desbloquear um elemento:**

* Clique com o botão direito no elemento e selecione **Lock** ou **Unlock**.
* Ou selecione o elemento e pressione **⇧⌘L**.

***

## Desfazer e refazer mudanças

Você pode desfazer e refazer suas edições recentes no canvas usando atalhos de teclado ou os botões de desfazer/refazer que aparecem na barra de ferramentas quando há histórico para percorrer.

Desfazer e refazer cobrem a maioria das ações do canvas: criar, mover, redimensionar, editar, excluir, bloquear e conectar elementos.

| Ação     | Mac | Windows                |
| -------- | --- | ---------------------- |
| Desfazer | ⌘Z  | Ctrl+Z                 |
| Refazer  | ⇧⌘Z | Ctrl+Shift+Z ou Ctrl+Y |

<Note>
  Desfazer e refazer são pessoais. Seu histórico é separado do dos colaboradores, então desfazer uma mudança só reverte suas próprias edições, não as deles. O canvas mantém até 50 etapas de histórico.
</Note>

***

## Zoom e navegação

A barra de zoom fica no canto inferior direito do canvas.

| Controle        | Atalho   | Ação                                                          |
| --------------- | -------- | ------------------------------------------------------------- |
| **Zoom to fit** | ⌘1       | Encaixar todo o canvas na visualização                        |
| **−**           | ⌘-       | Reduzir um passo de zoom                                      |
| Porcentagem     |          | Clique para abrir um dropdown com níveis de zoom predefinidos |
| **+**           | ⌘+ ou ⌘= | Aumentar um passo de zoom                                     |
|                 | ⌘0       | Redefinir para 100%                                           |

<Note>Esta página foi traduzida usando IA. Para informações mais precisas e atualizadas, consulte a [versão em inglês](/). </Note>