Um quadro de desenho implementado com HTML, CSS e JavaScript puro. Você pode desenhar linhas contínuas com o mouse, escolher a cor do traço e limpar a tela quando quiser.

• Desenhar linhas contínuas com junções arredondadas (lineJoin = "round").
• Paleta de cores: preto, azul, vermelho, verde, amarelo e cinza.
• Indicação visual da cor ativa.
• Botão "Limpar Quadro" para apagar todo o desenho.

• HTML5 (elemento <canvas>)
• CSS3
• JavaScript (API 2D do Canvas)

• index.html: marcação da página, título, canvas, paleta de cores, botão limpar e rodapé.
• style.css: estilos da página, layout centralizado, aparência do canvas e da paleta de cores.
• script.js: lógica de desenho, tratamento de eventos do mouse e mudança de cor.

1. Baixe ou clone este repositório.
2. Abra o arquivo index.html diretamente no seu navegador (duplo clique ou arraste para uma janela do navegador).
3. Opcionalmente, execute um servidor local para evitar bloqueios de algumas APIs (nem sempre necessário para este projeto):
   • Com Python: python3 -m http.server 8000 e acesse http://localhost:8000/.
   • Com extensões como Live Server (VS Code): clique em "Go Live" e acesse a URL fornecida.

• Selecione uma cor na barra de cores (a cor ativa fica com borda destacada).
• Clique e arraste o mouse sobre o canvas para desenhar.
• Solte o botão do mouse para parar de desenhar.
• Clique em "Limpar Quadro" para apagar todo o conteúdo da tela.

• Eventos principais no canvas: mousedown (começa a desenhar), mousemove (desenha enquanto o mouse se move) e mouseup (para de desenhar).
• O código calcula as coordenadas relativas ao canvas usando pageX/pageY menos offsetLeft/offsetTop do elemento.
• O traço é desenhado com beginPath(), moveTo(), lineTo() e stroke().
• Espessura do traço fixa em 5px (ctx.lineWidth = 5) e junção arredondada (ctx.lineJoin = 'round').
• A função de limpar usa clearRect() e reseta a transformação via setTransform(...) para garantir que a tela volte ao estado padrão.

• Requisitos: qualquer navegador moderno.
• Compatibilidade: projetado para desktop (mouse). Em telas sensíveis ao toque, seria necessário adicionar eventos de toque (touchstart, touchmove, touchend).

• Controle de espessura do pincel (slider).
• Seletor de cor personalizado (color picker) além das cores predefinidas.
• Salvar o desenho como imagem (usando canvas.toDataURL() e download).
• Suporte completo a dispositivos móveis (eventos de toque).
• Atalhos de teclado (ex.: tecla "C" para limpar).
• Alterar o tamanho do canvas dinamicamente e tornar o layout responsivo.

O rodapé da página indica: "Criado pela B7Web". Este projeto é utilizado para fins educacionais e de prática com Canvas.

A simple drawing board built with plain HTML, CSS, and JavaScript. You can draw continuous lines with the mouse, choose the stroke color, and clear the canvas whenever needed.

• Draw continuous lines with rounded joins (lineJoin = "round").
• Color palette: black, blue, red, green, yellow, and gray.
• Visual indication of the active color.
• "Clear Board" button to wipe the entire canvas.

• HTML5 (<canvas> element)
• CSS3
• JavaScript (Canvas 2D API)

• index.html: page markup, title, canvas, color palette, clear button, and footer.
• style.css: page styling, centered layout, canvas appearance, and color palette styles.
• script.js: drawing logic, mouse event handling, and color switching.

1. Download or clone this repository.
2. Open index.html directly in your browser (double-click or drag into a browser window).
3. Optionally, run a local server to avoid potential API restrictions (not usually required here):
   • With Python: python3 -m http.server 8000 and visit http://localhost:8000/.
   • With tools like Live Server (VS Code): click "Go Live" and open the provided URL.

• Select a color from the color bar (the active color is highlighted).
• Click and drag the mouse over the canvas to draw.
• Release the mouse button to stop drawing.
• Click "Clear Board" to erase the entire canvas.

• Main canvas events: mousedown (start drawing), mousemove (draw while the mouse moves), and mouseup (stop drawing).
• Coordinates are computed relative to the canvas using pageX/pageY minus the element's offsetLeft/offsetTop.
• The stroke is produced via beginPath(), moveTo(), lineTo(), and stroke().
• Fixed stroke width of 5px (ctx.lineWidth = 5) and rounded line joins (ctx.lineJoin = 'round').
• Clearing uses clearRect() and resets the transform via setTransform(...) to ensure the canvas returns to its default state.

• Requirements: any modern web browser.
• Compatibility: designed for desktop (mouse). For touch screens, add touch events (touchstart, touchmove, touchend).

• Brush size control (slider).
• Custom color picker in addition to predefined colors.
• Save drawing as an image (using canvas.toDataURL() and download).
• Full mobile/touch support.
• Keyboard shortcuts (e.g., "C" to clear).
• Dynamic canvas sizing and responsive layout.

The page footer states: "Criado pela B7Web" (Created by B7Web). This project is used for educational purposes and Canvas practice.