MrTimmyJ

Project Overview

        An interactive, canvas-based vector editor for pixel-precise drawing. Built with vanilla JavaScript and HTML5, this app supports multiple layers, ruler guides, zoom/pan controls, and a customizable toolset. Ideal for retro-style art, tilemaps, and creative prototyping.

        PixelVector Studio is a fully client-side vector-style editor focused on pixel precision. It offers multi-layer editing, tool-based drawing, grid customization, and user-friendly interactions like drag-to-pan and zooming.

Canvas System

• Uses an HTML5 canvas with p5.js integration
• Supports zooming and panning with mouse or touch
• Grid cells are stored in a 2D array with state tracking
• Layers stored as individual grid states with visibility toggles

Tool Handling

• Select, lines, squares, and eraser tools implemented using event listeners
• Color picker and presets update penColor in real-time
• Clipboard functionality allows copy/paste of selected areas

State Management

• Layer-based drawing grid stored in layers[]
• Selection stored with start/end coordinates and offsets
• Undo/redo tracked in gridHistory[] and redoHistory[]
• Project name, path, and changes tracked for potential file operations

Project Features

• 🖼️ Canvas grid with customizable size and cell dimensions
• ✏️ Tools: select, draw lines, draw squares, eraser
• 🧭 Rulers, zoom, and panning
• 🎚️ Adjustable color presets (save, load, and clear)
• 🧱 Multi-layer editing support
• 🧰 Grid history with undo/redo
• 📌 Click+drag selection & move
• 🧠 Smart clipboard system
• ✅ Interactive UI and shortcut support

Project User Workflow

• Launch the web app (no install needed)
• Use the toolbar to select tools, pick colors, and adjust the grid
• Draw on the canvas and manage layers
• Continue editing with full undo/redo support