✏️ Inserir Objetos
Todos os objetos inseridos são selecionáveis, arrastáveis, redimensionáveis e rotacionáveis diretamente no canvas.
| Item | Como usar |
|---|
| 📝 Texto | Insere o texto digitado no Editor de Texto |
| 🖼️ Imagem | Abre o seletor de arquivo para inserir PNG, JPG, GIF, WebP |
| ⬛ Retângulo | Insere um retângulo no centro da página |
| ⚪ Círculo | Insere um círculo no centro da página |
| ➡️ Seta | Insere uma seta horizontal editável |
| ⭐ Estrela | Insere uma estrela de 5 pontas |
| ❤️ Coração | Insere um coração vetorial |
| 🔷 Losango | Insere um losango vetorial |
| 🎨 Aplicar Estilo | Aplica as cores de Contorno e Preenchimento ao objeto selecionado |
💡 Dica: Selecione qualquer forma, mude as cores de Contorno e Preenchimento e clique em 🎨 Aplicar Estilo para recolorir instantaneamente.
📝 Editor de Texto
Digite na área de texto e use os controles para formatar antes ou depois de inserir.
| Controle | Função |
|---|
| ➕ Inserir Novo Texto | Cria um novo objeto de texto no canvas com o conteúdo digitado |
| 🔄 Atualizar Selecionado | Substitui o conteúdo do texto selecionado no canvas |
| 🎨 Cor | Define a cor do texto |
| 📏 Tamanho | Tamanho da fonte de 8px a 120px |
| 📐 Espaç. Linhas | Ajusta o espaçamento entre linhas do texto |
| ✏️ Espaç. Letras | Ajusta o espaçamento entre caracteres (tracking) |
| Alinhamento | Esquerda, Centro, Direita ou Justificado |
| Negrito / Itálico / Sublinhado / Tachado | Estilos tipográficos básicos |
| 🖋️ Contorno | Espessura do contorno (borda) do texto de 0 a 20px, com cor própria |
| 🔤 Fonte | Seleciona a família tipográfica: Arial, Verdana, Times, Georgia, Impact, Courier |
| ✅ Aplicar Formatação | Aplica todas as configurações de formato ao texto selecionado no canvas |
🌑 Sombra do Texto
Adiciona sombra a qualquer objeto de texto. Selecione o texto no canvas primeiro.
| Controle | Função |
|---|
| Cor da sombra | Qualquer cor, incluindo transparência visual pelo desfoque |
| Desl. X / Y | Desloca a sombra horizontalmente e verticalmente (−20 a +20px) |
| Desfoque | Intensidade do blur da sombra (0 = sombra dura, 30 = muito difusa) |
| 🌑 Aplicar Sombra | Aplica a sombra configurada ao texto selecionado |
| ✕ Remover Sombra | Remove completamente a sombra do texto selecionado |
💡 Ao clicar num texto que já tem sombra, os controles sincronizam automaticamente com os valores existentes.
✒️ Caneta Bezier — Desenho Vetorial
Ferramenta profissional para criar formas e logos vetoriais do zero. Clique em ✒️ Caneta Bezier na seção Inserir para ativar.
| Ação | Como fazer |
|---|
| Ponto reto (canto) | Clique simples no canvas |
| Ponto curvo (suave) | Clique e arraste — o arraste define a direção e intensidade da curva |
| Fechar o path | Clique no primeiro ponto (fica verde ao aproximar) |
| Finalizar aberto | Botão ✔ Finalizar ou tecla Enter |
| Desfazer último ponto | Botão ↩ Desfazer Ponto |
| Cancelar tudo | Botão ✕ Cancelar ou tecla Escape |
| Cor do contorno | Seletor Contorno antes de desenhar |
| Cor do preenchimento | Seletor Preench. — deixe em branco para path sem fill |
💡 Ao finalizar ou fechar o path, o editor entra automaticamente no modo de edição de nós para você refinar a forma.
🖊 Edição de Nós — Controle Total do Path
Ativado automaticamente após criar um path, ou clicando em 🖊 Editar Nós do Path na seção Ações com um path selecionado.
Elementos visuais
| 🟣 Âncora roxa | Ponto do path — posição do nó |
| 🟠 Handle laranja | Controla a curva Bezier — arraste para curvar o segmento |
| 🩷 Âncora rosa | Nó selecionado (clique uma vez para selecionar) |
| 🔴 Handle vermelho | Handle quebrado — os dois lados se movem independentemente |
| 🟡 Âncora borda amarela | Nó com handles independentes (quebrados) |
Interações com o mouse
| Ação | Resultado |
|---|
| Arrastar âncora | Move o nó — os handles se deslocam junto |
| Arrastar handle | Curva o segmento — handle oposto espelha (simétrico) |
| Alt + arrastar handle | Quebra a simetria — cp1 e cp2 se movem independentemente. Essencial para formas assimétricas como pétalas, gotas e letras |
| 1× clique no âncora | Seleciona o nó (fica rosa) |
| 2× clique no âncora | Alterna entre canto reto ↔ curvo suave |
| 3× clique no âncora | Restaura a simetria dos handles (desfaz quebra) |
| Clique-direito no âncora | Deleta aquele nó imediatamente |
Botões do painel de nós
| Botão | Função |
|---|
| ➕ Adicionar Nó | Ativa modo inserção — clique no canvas para adicionar nó no segmento mais próximo |
| 🗑️ Deletar Nó | Toca no botão pra armar (fica vermelho), depois toca em qualquer nó pra excluir — funciona igual em mouse e touch |
| 〜 Suavizar Todos | Converte todos os nós para curvas suaves automaticamente |
| ◇ Todos Retos | Remove todos os handles — todos os nós viram cantos retos |
| ↩ Inverter Path | Inverte a direção de traçado do path (útil para animações) |
| ⬡ Fechar/Abrir | Fecha o path (conecta último ao primeiro nó) ou abre se já fechado |
| ✅ Confirmar e Sair | Finaliza a edição — o path vira objeto normal selecionável e editável |
💡 Após confirmar, use 🎨 Aplicar Estilo para colorir o path. Para reeditar depois, selecione o path e clique em 🖊 Editar Nós do Path na seção Ações.
✨ Arabescos e Ornamentos
Insere ornamentos decorativos prontos ou importa os seus próprios arquivos SVG e PNG.
| Controle | Função |
|---|
| 🎨 Contorno / Preench. | Define as cores de contorno e preenchimento a aplicar ao inserir |
| Checkbox Preenchido | Ativado = aplica cor de preenchimento; desativado = só contorno |
| 📤 Importar (SVG/PNG) | Importa seu próprio arquivo SVG ou imagem PNG/JPG. SVG permite coloração perfeita |
| Grade de ornamentos | Clique em qualquer ornamento para inserir no canvas com as cores configuradas |
| 🖍️ Nova cor + 🎨 Colorir | Selecione um arabesco no canvas, escolha a nova cor e clique Colorir |
💡 SVG é recomendado para coloração precisa — arquivos SVG permitem trocar cores em todos os elementos. PNG usa filtro de cor (resultado aproximado). Arabescos importados ficam salvos permanentemente no navegador (IndexedDB).
🔤 Fontes Personalizadas
Carregue fontes customizadas (.ttf, .otf, .woff) para usar nos seus textos.
| Passo | Como fazer |
|---|
| 1. Selecionar arquivo | Clique em Escolher Arquivo e selecione um arquivo de fonte (.ttf, .otf, .woff) |
| 2. Carregar | Clique em 📥 Carregar Fonte — a fonte aparece no seletor de fontes do Editor de Texto |
| 3. Usar | Selecione a fonte carregada no menu e aplique ao texto normalmente |
⚠️ Atenção: Fontes carregadas existem apenas durante a sessão atual. Ao fechar e reabrir o arquivo, será necessário carregar novamente.
📁 Gerenciador de Projetos
Salva e abre projetos diretamente no navegador, sem necessidade de baixar arquivos.
| Ação | Como fazer |
|---|
| Salvar projeto | Digite um nome e clique 💾 Salvar. Se o nome já existir, pergunta se deseja substituir |
| Abrir projeto | Clique em ▶ Abrir no slot desejado |
| Deletar projeto | Clique em 🗑️ no slot — pede confirmação antes de excluir |
| Backup externo | Use 💿 Salvar .json na toolbar para baixar o arquivo e guardar fora do navegador |
⚠️ Projetos salvos no navegador podem ser perdidos se o cache for limpo. Recomendado fazer backup periódico com 💿 Salvar .json.
💼 O que o Artifex faz por profissão
Um recorte das ferramentas do editor organizado pelo uso mais comum de cada área — pra você achar rápido o que precisa.
🎓 Professores e Educadores
- 🎓 Aula de Desenho — guia passo a passo pra ensinar a desenhar formas e personagens em sala de aula ou em vídeo-aula
- ✍️ Criar Fontes: Guias & Alfabeto — monta folhas de caligrafia e alfabeto com linhas-guia pra atividades de escrita
- ⭐ Letras 3D e 🔤 Texto em Arco — títulos chamativos pra cartazes, capas de atividade e material de sala
- 💾 Exportar em PNG ou PDF — pra imprimir direto ou distribuir a atividade digitalmente
📚 Autores Independentes (Amazon KDP)
- 📚 Presets KDP Amazon (por nicho) — tamanhos de página prontos pra livro de colorir, atividades e outros formatos de baixo conteúdo
- 🪣 Balde de Tinta — feche formas com o lápis e preencha regiões com um toque, pra criar as próprias páginas de colorir
- 📑 Páginas — monte um livro inteiro com várias páginas dentro do mesmo projeto
- 💾 Exportar tudo num único PDF, pronto pra subir na plataforma
🎨 Designers Gráficos e Ilustradores
- ✒️ Caneta Bezier — desenha paths vetoriais de verdade (curvas editáveis), do mesmo jeito que no Illustrator ou CorelDraw
- 🖊 Edição de Nós — ajusta cada ponto e curva depois de traçado, com suavização automática
- 🗂️ Camadas — organiza elementos em camadas separadas, com visibilidade, bloqueio e reordenação
- 🌟 Efeitos Visuais e 🎨 Fundo da Página (cor sólida ou gradiente) — pra composições mais elaboradas
- 💾 Exportar PNG com fundo transparente — pra reaproveitar o elemento em outros projetos
💬 Criadores de Quadrinhos e HQs
- 📚 Modelos de Quadrinhos — grades de quadros prontas pra montar uma página de HQ rapidamente
- 📝 Editor de Texto — balões de fala e legendas, com estilo (negrito, itálico, sublinhado)
- 🔤 Texto em Arco — títulos e efeitos sonoros ("BOOM!", "POW!") com curvatura
- 📑 Páginas — várias páginas de HQ dentro do mesmo projeto, navegáveis com ◀ ▶
📱 Criadores de Conteúdo e Redes Sociais
- 📐 Formatos predefinidos — 1080×1080 (Instagram), 1080×1920 (Stories), 1920×1080 (YouTube), 1920×720 (Banner)
- ⭐ Letras 3D e ✨ Arabescos — elementos decorativos pra thumbnails e capas chamativas
- 📄 Duplicar — cria variações rápidas de cor/layout da mesma peça
- 🖼️ Exportar PNG — pronto pra postar
💡 Nenhuma dessas listas é exclusiva — todas as ferramentas do Artifex ficam disponíveis na sidebar o tempo todo, independente do tipo de projeto que você está montando.
🎓 11 Tutoriais Passo a Passo
Exemplos práticos do que é possível criar com este editor.
📌 Tutorial 1 — Criar um Logo Simples com Bezier
Desenhe uma forma orgânica, feche-a, colora e combine com texto para compor um logo do zero.
- Vá em ✏️ Inserir → ✒️ Caneta Bezier e ative a ferramenta
- Defina a cor de Contorno e Preenchimento desejados no painel
- Clique no canvas para criar o primeiro ponto. Clique em outros pontos ao redor formando o contorno da forma
- Para curvas: clique e arraste ao criar o ponto — quanto mais arrasta, mais curva
- Aproxime o cursor do primeiro ponto verde e clique para fechar a forma
- O editor de nós abre automaticamente — ajuste os handles (pontos laranja) para refinar as curvas
- Clique ✅ Confirmar e Sair
- Vá em 📝 Editor de Texto, digite o nome do logo, escolha fonte e cor
- Clique ➕ Inserir Novo Texto e posicione sobre ou abaixo da forma
- Selecione os dois objetos (Shift+clique), clique 🔗 Agrupar — logo pronto!
📌 Tutorial 2 — Desenhar uma Pétala ou Folha com Handle Quebrado
O handle quebrado (Alt+drag) é essencial para formas assimétricas como pétalas, gotas e folhas.
- Ative a ✒️ Caneta Bezier
- Clique e arraste para criar o ponto de baixo da pétala — arraste para a direita
- Clique e arraste para criar o ponto do topo — arraste para cima
- Clique no primeiro ponto para fechar
- No editor de nós, clique no ponto do topo para selecioná-lo
- Arraste um dos handles laranjas com Alt pressionado — ele se quebra, movendo independente do outro
- Ajuste cada handle individualmente até a forma ficar assimétrica como uma pétala real
- O handle fica vermelho indicando que está quebrado
- Para restaurar a simetria do ponto: 3 cliques rápidos no âncora
- Confirme, aplique cor verde no preenchimento via 🎨 Aplicar Estilo
📌 Tutorial 3 — Criar um Convite com Arabescos Coloridos
Use arabescos SVG para decorar um convite de casamento, aniversário ou evento.
- Em 📐 Propriedades da Página, clique em A4 Retrato
- Em 🎨 Fundo da Página, selecione Cor Sólida, escolha um creme (#FFF8F0) e clique Aplicar
- Vá em ✨ Arabescos → 📤 Importar (SVG/PNG) e importe seu arquivo SVG decorativo
- Defina a cor de Preenchimento como dourado (#C9A84C), marque Preenchido e clique no arabesco importado
- Redimensione e posicione nos cantos superiores. Duplique (Ctrl+C / Ctrl+V não existe — importe novamente ou agrupe e copie)
- Selecione o arabesco e use 🎨 Colorir se quiser mudar a cor depois
- Vá no Editor de Texto, escolha uma fonte elegante (ex: Georgia), tamanho 36, cor dourada
- Digite o nome dos noivos e clique ➕ Inserir
- Adicione subtexto menor com data, local e horário
- Exporte com 📸 JPG ou 📑 PDF para impressão
📌 Tutorial 4 — Post para Instagram (1080×1080)
Crie um post quadrado para redes sociais com gradiente, texto e formas.
- Em 📐 Propriedades, clique em 📷 1080×1080
- Em 🎨 Fundo, selecione aba Gradiente, defina duas cores vibrantes e ângulo 45°, clique Aplicar Gradiente
- Em ✏️ Inserir, clique em ⬛ Retângulo — redimensione para cobrir a parte inferior como uma faixa
- Com o retângulo selecionado, defina preenchimento escuro semitransparente via 🎨 Aplicar Estilo
- Insira o texto principal: fonte Impact, tamanho 80, cor branca, centralizado
- Adicione sombra ao texto: 🌑 Sombra, cor preta, offset X:3 Y:3, blur:6, clique Aplicar Sombra
- Insira um subtexto menor com a chamada para ação
- Adicione uma estrela ou coração como elemento decorativo
- Use ⬇️ Enviar p/ Trás no retângulo para ele ficar atrás do texto
- Exporte como 🖼️ PNG para manter qualidade máxima
📌 Tutorial 5 — Capa de Livro Infantil
Combine letras 3D, formas coloridas e texto para criar uma capa de livro para crianças.
- Em 📐 Propriedades, clique em 📚 Livro Infantil (2480×3508)
- Aplique fundo em gradiente com cores alegres (azul claro → amarelo)
- Em ✏️ Inserir, adicione círculos e estrelas coloridos como elementos de fundo
- Vá em ⭐ Letras 3D — defina cor principal amarela, sombra laranja, espessura 8
- Clique nas letras do título uma a uma para inserir cada letra no canvas
- Posicione as letras 3D em arco na parte superior da página
- Insira o nome do autor em texto normal na parte inferior, fonte Georgia, tamanho adequado
- Adicione uma imagem PNG (personagem ou ilustração) via 🖼️ Imagem
- Ajuste as camadas com ⬆️ Trazer p/ Frente e ⬇️ Enviar p/ Trás
- Exporte como 📑 PDF para enviar para gráfica
📌 Tutorial 6 — Editar Nós de um Path Existente
Como refinar uma forma Bezier já criada, adicionando e removendo nós para ajustar o contorno.
- Clique no path Bezier no canvas para selecioná-lo
- Na seção ⚙️ Ações, clique em 🖊 Editar Nós do Path
- Os nós roxos e handles laranjas aparecem sobre a forma
- Para adicionar nó: clique em ➕ Adicionar Nó e depois clique no canvas perto do segmento onde quer inserir
- Para remover nó: toca em 🗑️ Deletar Nó pra armar (fica vermelho) e depois toca no âncora que quer excluir, ou clique-direito diretamente no âncora (mouse)
- Para suavizar a forma toda: clique 〜 Suavizar Todos
- Para deixar tudo reto: clique ◇ Todos Retos
- Para fechar um path aberto: clique ⬡ Fechar/Abrir
- Ajuste handles individualmente arrastando os pontos laranjas
- Clique ✅ Confirmar e Sair quando estiver satisfeito
📌 Tutorial 7 — Criar um Banner YouTube (1920×1080)
Monte um banner profissional para canal do YouTube com múltiplas páginas para variações.
- Em 📐 Propriedades, clique em 🖥️ 1920×1080
- Aplique gradiente escuro como fundo (azul escuro → roxo)
- Insira o nome do canal em letras grandes — fonte Impact ou Verdana, cor branca, sombra azul
- Crie uma forma decorativa com Bezier: uma faixa diagonal que divide o banner
- Coloque a faixa atrás do texto com ⬇️ Enviar p/ Trás
- Adicione subtexto: slogan ou categoria do canal
- Clique 📄 Duplicar na toolbar para criar uma variação de cor
- Na página 2, mude as cores do fundo e da faixa para uma paleta diferente
- Navegue entre as variações com os botões ◀ ▶
- Exporte cada página separada como 🖼️ PNG
📌 Tutorial 8 — Vetorizar um Ornamento com Múltiplos Paths
Como construir um ornamento complexo desenhando vários paths separados e agrupando ao final.
- Ative a ✒️ Caneta Bezier e desenhe o elemento central (ex: oval decorativo)
- Feche o path, confirme e aplique a cor principal
- Ative a Caneta novamente e desenhe um elemento secundário ao redor (ex: folha ou espiral)
- Use 〜 Suavizar Todos no editor de nós para suavizar as curvas
- Confirme e aplique cor complementar
- Repita para cada elemento do ornamento (3 a 5 paths)
- Para espelhar: selecione um path, exporte como PNG, reimporte e escale negativamente — ou desenhe o lado oposto manualmente
- Quando todos os elementos estiverem posicionados, selecione todos com Shift+clique
- Clique 🔗 Agrupar — o ornamento vira um objeto único
- Exporte como 🖼️ PNG com fundo transparente para usar em outros projetos
📌 Tutorial 9 — Gerenciar Múltiplos Projetos
Trabalhe em vários projetos diferentes sem perder nenhum, usando o gerenciador integrado.
- Crie seu primeiro projeto (ex: convite de casamento com várias páginas)
- Clique em 📁 Meus Projetos na toolbar
- Digite "Convite Casamento" no campo de nome e clique 💾 Salvar
- Clique em ➕ Nova Página na toolbar para começar um novo projeto do zero — ou importe outro .json
- Crie o segundo projeto (ex: banner YouTube)
- Abra 📁 Meus Projetos novamente, salve como "Banner YouTube"
- Para alternar entre projetos: abra o gerenciador e clique ▶ Abrir no projeto desejado
- Para fazer backup externo: com o projeto aberto, clique 💿 Salvar .json na toolbar
- Para restaurar de backup: clique 📂 Importar .json e selecione o arquivo salvo
- Para excluir projeto do navegador: clique no 🗑️ vermelho no slot — confirmando, exclui permanentemente
📌 Tutorial 10 — Criar um Documento Multipágina (Livro ou Apostila)
Monte um documento com várias páginas e exporte tudo em um único PDF.
- Em 📐 Propriedades, escolha o formato: A5 Livro (1748×2480) ou A4 Retrato
- Monte a capa na página 1: título em Letras 3D, subtítulo em texto normal, imagem de fundo
- Clique ➕ Nova Página para adicionar a página 2
- Monte o sumário: texto com os tópicos, linha separadora feita com seta redimensionada
- Continue adicionando páginas para cada capítulo ou seção
- Use 📄 Duplicar para repetir o layout de uma página já formatada
- Navegue entre páginas com os botões ◀ ▶ ou pela lista de páginas na sidebar
- Para verificar: navegue por todas as páginas antes de exportar
- Salve o projeto em 📁 Meus Projetos para continuar em outro momento
- Quando pronto, clique 📑 PDF na toolbar — todas as páginas são exportadas em um único arquivo PDF
📌 Tutorial 11 — Usar o Contorno do Lápis de Rascunho
O Contorno cria automaticamente uma borda colorida ao redor de cada traço novo do lápis — ótimo para dar destaque a rascunhos ou simular um efeito de "sticker". Ele desenha uma cópia mais grossa do traço, atrás do traço original, centralizada nos dois lados.
- Na seção ✏️ Lápis de Rascunho, clique ✏️ Ativar Lápis
- Marque a caixa 🖍️ Contorno no traço — um novo bloco de opções aparece
- Escolha a Cor do contorno (ex: branco ou uma cor de destaque) e a Espessura desejada
- Desenhe normalmente no canvas — cada traço novo já sai com a borda colorida ao redor, dos dois lados do traço, sem deslocamento
- Traços desenhados antes de marcar a caixa não ganham contorno retroativamente — só os traços novos, a partir do momento em que a opção é ativada
- Para desenhar sem contorno de novo, é só desmarcar a caixa a qualquer momento
- Dica: espessuras de contorno maiores (8–15px) funcionam melhor com traços grossos (HB5/HB6); para traços finos (HB2/HB3), contornos pequenos (2–4px) ficam mais equilibrados
📌 Tutorial 12 — Colorir Áreas Fechadas (Contorno Inteligente e Auto Fill)
A seção 🎨 Colorir, logo abaixo do 🪣 Balde de Tinta na barra lateral, resolve um problema que o Balde comum não resolve bem: pintar várias formas fechadas diferentes que estão na mesma camada, cada uma com uma cor, sem uma vazar pra dentro da outra por causa de frestinhas entre traços do lápis. Ela funciona em cima de um retrato (raster) do que já está desenhado — não mexe nos traços vetoriais do lápis nem no Balde, que continuam intactos.
- Desenhe normalmente com o ✏️ Lápis — pode usar quantos traços/objetos quiser dentro da mesma camada
- Abra a seção 🎨 Colorir na barra lateral e clique Ativar modo Colorir — ela tira um retrato de tudo que já está desenhado
- Escolha o modo Contorno inteligente (em vez de "Cor exata") — ele detecta as linhas do desenho como uma "parede" e fecha frestas pequenas entre traços diferentes, sem inflar a área pintada
- Ajuste Fechar frestas até (comece com 2–3px) e Sensibilidade da linha se alguma área não fechar direito ou vazar pra fora do desenho
- Toque dentro de qualquer área fechada para colori-la — toque em outra área com outra cor selecionada para pintar ela separadamente, mesmo estando tudo na mesma camada
- Para pintar tudo de uma vez: use o painel ⚡ Auto Fill — ele detecta automaticamente todas as áreas fechadas e preenche cada uma, sem precisar clicar uma por uma
- No Auto Fill, escolha o Estilo: Cores em sequência (cicla pela paleta), Cor única, Gradiente automático (claro no centro, escuro na borda de cada área) ou Textura (sobe uma imagem e usa como preenchimento, repetida em mosaico)
- Ajuste Ignorar áreas menores que para não preencher ruído (pontinhos, serrilhado do desenho)
- Também dá pra colorir um PNG/JPG pronto, sem ter desenhado nada: use 📁 Carregar PNG/JPG antes de ativar o modo Colorir
- Quando estiver satisfeito com o resultado, clique ✓ Aplicar ao desenho — o preenchimento colorido vira o fundo do canvas real, e os traços do lápis (que são objetos vetoriais separados) continuam por cima, intactos
- Dica: tudo roda direto no navegador, sem depender de nenhuma lib externa de preenchimento nem de Web Worker — por isso funciona igual no celular, no tablet e no desktop
📌 Tutorial 13 — O Que Mudou no Artifex (Changelog da Seção Colorir)
Registro de tudo que foi adicionado, movido ou ajustado no app durante o desenvolvimento da seção 🎨 Colorir — pra você (ou qualquer um mexendo no código depois) saber exatamente o que mudou e por quê. Nada listado aqui alterou o funcionamento do Lápis ou do Balde originais.
- 1. Nova seção 🎨 Colorir criada — preenche áreas fechadas do desenho com flood fill próprio, escrito do zero (sem q-floodfill, sem nenhuma lib externa) e rodando 100% na thread principal (sem Web Worker), pra funcionar igual em celular, tablet e desktop
- 2. Modo "Cor exata (tolerância)" — preenchimento clássico por proximidade de cor, a partir do ponto tocado
- 3. Modo "Contorno inteligente" — detecta as linhas do desenho como uma "parede", fecha frestas pequenas entre traços diferentes (dilata e depois erode a máscara, sem inflar a área pintada) e permite colorir várias formas fechadas da MESMA camada, cada uma com uma cor, sem uma vazar na outra
- 4. ⚡ Auto Fill — varre o desenho inteiro, encontra todas as áreas fechadas de uma vez (reaproveitando a mesma detecção do Contorno inteligente) e preenche todas automaticamente, com 4 estilos: Cores em sequência (paleta), Cor única, Gradiente automático (radial, claro no centro/escuro na borda) e Textura (imagem carregada, repetida em mosaico)
- 5. Carregar PNG/JPG — dá pra colorir uma imagem pronta, carregada do dispositivo, sem precisar ter desenhado nada no Artifex antes
- 6. Protótipo antigo removido — o bloco de teste "Balde em Web Worker" (canvas próprio, isolado, sem relação com o desenho real) foi apagado do arquivo; não tinha uso depois que o Colorir passou a funcionar direto no canvas real
- 7. Seção Colorir reposicionada — estava solta no fim da página; agora mora na barra lateral, logo abaixo do 🪣 Balde de Tinta e acima de 🗂️ Camadas, no mesmo estilo visual das outras seções
- 8. 🪣 Balde de Tinta e ✏️ Lápis de Rascunho — nenhuma linha de código dessas duas seções foi alterada em nenhum momento; continuam exatamente como eram, incluindo o Contorno do lápis (Tutorial 11) e todos os ajustes de "fechar fresta" no Balde feitos anteriormente
- 9. Tutoriais 12 e 13 adicionados — este e o anterior, documentando como usar a seção Colorir e o que mudou no código
- Dica: se algo no app parecer "fora do lugar" visualmente depois de uma atualização, normalmente é algum comentário ou marcação de código desalinhada — não afeta o funcionamento, só a organização interna do arquivo
