Paint

:root { --bg: #f3f4f6; --toolbar-bg: #ffffff; --accent: #2563eb; --muted: #6b7280; } html, body { height: 100%; margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: #111827; } .toolbar { display: flex; gap: 12px; align-items: center; padding: 10px; background: var(--toolbar-bg); box-shadow: 0 1px 2px rgba(0,0,0,0.06); position: sticky; top: 0; z-index: 10; flex-wrap: wrap; } .toolbar .section { display: flex; gap: 8px; align-items: center; } .toolbar label { font-size: 13px; color: var(--muted); } .toolbar select, .toolbar input[type="color"], .toolbar input[type="range"], .toolbar button { padding: 6px 8px; border-radius: 6px; border: 1px solid #e5e7eb; background: white; font-size: 13px; } .toolbar .actions button { background: var(--accent); color: white; border: none; padding: 8px 12px; cursor: pointer; } .toolbar .actions button[disabled] { opacity: 0.5; cursor: default; } .canvas-wrap { position: relative; height: calc(100vh - 60px); display: flex; align-items: stretch; justify-content: center; padding: 12px; box-sizing: border-box; } canvas { background: white; box-shadow: 0 8px 24px rgba(15,23,42,0.08); max-width: 100%; max-height: 100%; border-radius: 6px; touch-action: none; } // Canvas handling: drawing, shapes, undo stack, overlay preview export class CanvasState { constructor(canvas) { this.canvas = canvas; this.ctx = canvas.getContext('2d', { willReadFrequently: true }); this.overlay = null; this.overlayCtx = null; this.width = 1600; this.height = 900; this.tool = 'brush'; this.color = '#000'; this.size = 6; this.isDrawing = false; this.start = { x: 0, y: 0 }; this.last = { x: 0, y: 0 }; this.undoStack = []; this.maxUndo = 40; this._setupCanvas(); this._bindEvents(); this._pushState(); // initial blank state } _setupCanvas() { // size the canvas to available area but keep high resolution const ratio = Math.min(window.innerWidth - 48, 1400); const h = Math.max(400, window.innerHeight - 160); this.width = Math.floor(ratio); this.height = Math.floor(h); this.canvas.width = this.width; this.canvas.height = this.height; this.canvas.style.width = `${this.width}px`; this.canvas.style.height = `${this.height}px`; // create overlay canvas for previews (shapes) this.overlay = document.createElement('canvas'); this.overlay.width = this.width; this.overlay.height = this.height; this.overlay.style.position = 'absolute'; this.overlay.style.left = this.canvas.offsetLeft + 'px'; this.overlay.style.top = this.canvas.offsetTop + 'px'; this.overlay.style.pointerEvents = 'none'; this.overlay.style.borderRadius = this.canvas.style.borderRadius; this.overlayCtx = this.overlay.getContext('2d'); // put overlay next to canvas in DOM this.canvas.parentNode.appendChild(this.overlay); } _bindEvents() { // pointer events unify mouse and touch this.canvas.addEventListener('pointerdown', this._onPointerDown.bind(this)); window.addEventListener('pointermove', this._onPointerMove.bind(this)); window.addEventListener('pointerup', this._onPointerUp.bind(this)); window.addEventListener('resize', this._onResize.bind(this)); } _onResize() { // simple behavior: keep current drawing but scale canvas snapshot to new size const prev = this._dataURL(); const ratio = Math.min(window.innerWidth - 48, 1400); const h = Math.max(400, window.innerHeight - 160); this.width = Math.floor(ratio); this.height = Math.floor(h); const img = new Image(); img.onload = () => { this.canvas.width = this.width; this.canvas.height = this.height; this.overlay.width = this.width; this.overlay.height = this.height; this.ctx.drawImage(img, 0, 0, this.width, this.height); }; img.src = prev; } _getPos(evt) { const rect = this.canvas.getBoundingClientRect(); return { x: Math.round((evt.clientX - rect.left) * (this.canvas.width / rect.width)), y: Math.round((evt.clientY - rect.top) * (this.canvas.height / rect.height)) }; } _onPointerDown(e) { if (e.button !== 0) return; this.isDrawing = true; const p = this._getPos(e); this.start = { ...p }; this.last = { ...p }; if (this.tool === 'brush' || this.tool === 'eraser') { this.ctx.lineCap = 'round'; this.ctx.lineJoin = 'round'; this.ctx.lineWidth = this.size; if (this.tool === 'eraser') { this.ctx.globalCompositeOperation = 'destination-out'; this.ctx.strokeStyle = 'rgba(0,0,0,1)'; } else { this.ctx.globalCompositeOperation = 'source-over'; this.ctx.strokeStyle = this.color; } this.ctx.beginPath(); this.ctx.moveTo(this.last.x, this.last.y); } else { // clear overlay for shape preview this._clearOverlay(); } } _onPointerMove(e) { if (!this.isDrawing) return; const p = this._getPos(e); if (this.tool === 'brush' || this.tool === 'eraser') { this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.last = { ...p }; } else if (this.tool === 'line') { this._clearOverlay(); this.overlayCtx.lineWidth = this.size; this.overlayCtx.strokeStyle = this.color; this.overlayCtx.beginPath(); this.overlayCtx.moveTo(this.start.x, this.start.y); this.overlayCtx.lineTo(p.x, p.y); this.overlayCtx.stroke(); } else if (this.tool === 'rect') { this._clearOverlay(); const x = Math.min(this.start.x, p.x); const y = Math.min(this.start.y, p.y); const w = Math.abs(p.x - this.start.x); const h = Math.abs(p.y - this.start.y); this.overlayCtx.lineWidth = this.size; this.overlayCtx.strokeStyle = this.color; this.overlayCtx.strokeRect(x, y, w, h); } } _onPointerUp(e) { if (!this.isDrawing) return; this.isDrawing = false; const p = this._getPos(e); if (this.tool === 'brush' || this.tool === 'eraser') { this.ctx.closePath(); // restore composite mode this.ctx.globalCompositeOperation = 'source-over'; } else if (this.tool === 'line') { this._clearOverlay(); this.ctx.lineWidth = this.size; this.ctx.strokeStyle = this.color; this.ctx.beginPath(); this.ctx.moveTo(this.start.x, this.start.y); this.ctx.lineTo(p.x, p.y); this.ctx.stroke(); this.ctx.closePath(); } else if (this.tool === 'rect') { this._clearOverlay(); const x = Math.min(this.start.x, p.x); const y = Math.min(this.start.y, p.y); const w = Math.abs(p.x - this.start.x); const h = Math.abs(p.y - this.start.y); this.ctx.lineWidth = this.size; this.ctx.strokeStyle = this.color; this.ctx.strokeRect(x, y, w, h); } this._pushState(); } _clearOverlay() { this.overlayCtx.clearRect(0, 0, this.overlay.width, this.overlay.height); } _pushState() { // push DataURL for undo const url = this._dataURL(); this.undoStack.push(url); if (this.undoStack.length > this.maxUndo) { this.undoStack.shift(); } } _dataURL() { return this.canvas.toDataURL('image/png'); } undo() { if (this.undoStack.length <= 1) { // just clear this.clear(); return; } // pop current state this.undoStack.pop(); const url = this.undoStack[this.undoStack.length - 1]; const img = new Image(); img.onload = () => { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height); }; img.src = url; } clear() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this._pushState(); } setTool(tool) { this.tool = tool; } setColor(color) { this.color = color; } setSize(size) { this.size = size; } savePNG(filename = 'paint.png') { const link = document.createElement('a'); link.download = filename; link.href = this._dataURL(); link.click(); } } import { CanvasState } from './canvas.js'; export function initUI() { const canvasEl = document.getElementById('paint'); const cs = new CanvasState(canvasEl); const tool = document.getElementById('tool'); const color = document.getElementById('color'); const size = document.getElementById('size'); const sizeVal = document.getElementById('sizeVal'); const undoBtn = document.getElementById('undo'); const clearBtn = document.getElementById('clear'); const saveBtn = document.getElementById('save'); tool.addEventListener('change', (e) => { cs.setTool(e.target.value); }); color.addEventListener('input', (e) => { cs.setColor(e.target.value); }); size.addEventListener('input', (e) => { const v = parseInt(e.target.value, 10); sizeVal.textContent = v; cs.setSize(v); }); undoBtn.addEventListener('click', () => { cs.undo(); }); clearBtn.addEventListener('click', () => { if (confirm('Clear the canvas?')) { cs.clear(); } }); saveBtn.addEventListener('click', () => { cs.savePNG(); }); // initialize values cs.setColor(color.value); cs.setSize(parseInt(size.value, 10)); cs.setTool(tool.value); // keyboard shortcuts window.addEventListener('keydown', (e) => { if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'z') { e.preventDefault(); cs.undo(); } }); return cs; } import { initUI } from './ui.js'; // Initialize the UI and canvas document.addEventListener('DOMContentLoaded', () => { initUI(); }); Paint — Minimal browser paint app Quick start: 1. Open index.html in your browser. 2. Select a tool (Brush, Eraser, Line, Rectangle). 3. Pick color and brush size. 4. Draw on the canvas. Use Undo or Clear. Save as PNG. Notes: - Works with mouse and touch (pointer events). - Uses an overlay canvas for shape previews.