Paint

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; } 1d:T5a3, Paint

1e:T1e1a,// 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