CanvasGrid Studio Pro é uma suíte de criação de arte digital web-based, desenvolvida para oferecer uma experiência profissional, fluida e imersiva. O projeto combina um motor de desenho vetorial/raster com camadas e um editor de Pixel Art dedicado.
🔗 [Acesse a Demo Online](EM BREVE)
Um estúdio de desenho livre focado em performance e liberdade criativa.
- Sistema de Camadas (Layers): Crie, ordene e exclua camadas independentes.
- Motor High-DPI: Renderização nítida em telas Retina/4K.
- Histórico Robusto: Sistema de Undo/Redo (Ctrl+Z / Ctrl+Y) sem perda de dados.
- Ferramentas: Pincel (com suavização), Borracha, Balde de Tinta e Conta-gotas.
- Zoom Infinito: Navegação fluida pela arte.
Um editor preciso para criação de sprites e assets de jogos.
- Grids Dinâmicos: Suporte de 8x8 até 64x64 pixels.
- Ferramentas de Precisão: Lápis, Borracha, Flood Fill e Picker.
- Exportação Inteligente: Salva PNGs em alta resolução (Upscaled) prontos para uso.
- Interface Dedicada: Paleta de cores e controles focados em Pixel Art.
O projeto foi construído seguindo os princípios de Vanilla JS Moderno e Orientação a Objetos (OOP).
- Core: HTML5, CSS3, JavaScript (ES6+ Modules).
- Estilização: Tailwind CSS (Configuração via CDN para prototipagem ágil).
- Ícones: Lucide Icons.
- Arquitetura:
- Classes JS separadas (
CanvasDrawPro,PixelArtEditor). - Gerenciamento de Estado centralizado em cada módulo.
- Event Delegation para alta performance no DOM.
- Classes JS separadas (
Este projeto utiliza Módulos ES6 (import/export), o que requer um servidor HTTP local para evitar bloqueios de CORS do navegador.
- Um navegador moderno (Chrome, Edge, Firefox).
- Git (opcional).
-
Clone o repositório:
git clone [https://github.com/SEU-USUARIO/canvasgrid-studio.git](https://github.com/SEU-USUARIO/canvasgrid-studio.git) cd canvasgrid-studio -
Inicie um servidor local:
- Opção A (Python 3):
python -m http.server 8000
- Opção B (Node.js / http-server):
npx http-server . - Opção C (VS Code): Instale a extensão "Live Server" e clique em "Go Live" no canto inferior direito.
- Opção A (Python 3):
-
Acesse: Abra
http://localhost:8000no seu navegador.
Maximize sua produtividade com hotkeys profissionais:
| Tecla | Ação |
|---|---|
| B | Ferramenta Pincel / Lápis |
| E | Ferramenta Borracha |
| F / G | Balde de Tinta (Fill) |
| I | Conta-gotas (Eyedropper) |
| [ | Diminuir Pincel |
| ] | Aumentar Pincel |
| Ctrl + Z | Desfazer (Undo) |
| Ctrl + Y | Refazer (Redo) |
| Scroll | Zoom In / Out (Segurando Ctrl em alguns navegadores) |
Este é um projeto Open Source focado em aprendizado e portfólio. Sinta-se livre para abrir Issues ou Pull Requests.
- Faça um Fork do projeto.
- Crie uma Branch para sua Feature (
git checkout -b feature/NovaFeature). - Faça o Commit (
git commit -m 'Adicionando NovaFeature'). - Faça o Push (
git push origin feature/NovaFeature). - Abra um Pull Request.
Desenvolvido com 💛 por Angel Luz.
Se quiser conversar, colaborar ou oferecer uma oportunidade:
📬 E-mail: [email protected]
🐙 GitHub: @angelluzk
💼 LinkedIn: linkedin.com/in/angelitaluz
🗂️Website / Portfólio: meu_portfolio/