Paint Placeholder Widget

(function () { var canvas = document.getElementById('paint-canvas'); var ctx = canvas.getContext('2d'); var colorInput = document.getElementById('brush-color'); var sizeInput = document.getElementById('brush-size'); var btnClear = document.getElementById('btn-clear'); var btnDownload = document.getElementById('btn-download'); var dataUrlField = document.getElementById('painting-data-url'); var filenameField = document.getElementById('painting-filename'); var filenamePreview = document.getElementById('filename-preview'); function pathToSafeBasename() { var path = window.location.pathname || '/'; var seg = path.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean); var base = seg.length ? seg.join('-') : 'index'; if (!base || base === '') base = 'painting'; return base.replace(/[^a-zA-Z0-9._-]+/g, '-').replace(/^-+|-+$/g, '') || 'painting'; } function suggestedFilename() { var base = pathToSafeBasename(); var d = new Date(); var stamp = d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0') + '_' + String(d.getHours()).padStart(2, '0') + String(d.getMinutes()).padStart(2, '0') + String(d.getSeconds()).padStart(2, '0'); return base + '-sketch-' + stamp + '.png'; } function resizeCanvasToDisplaySize() { var wrap = canvas.parentElement; var w = wrap.clientWidth; var ratio = window.devicePixelRatio || 1; var displayH = 220; var bw = Math.floor(w * ratio); var bh = Math.floor(displayH * ratio); if (canvas.width !== bw || canvas.height !== bh) { var prev = document.createElement('canvas'); prev.width = canvas.width; prev.height = canvas.height; var prevCtx = prev.getContext('2d'); if (canvas.width && canvas.height) { prevCtx.drawImage(canvas, 0, 0); } canvas.width = bw; canvas.height = bh; ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, bw, bh); if (prev.width && prev.height) { ctx.drawImage(prev, 0, 0, prev.width, prev.height, 0, 0, bw, bh); } } ctx.lineCap = 'round'; ctx.lineJoin = 'round'; } function getCoords(e) { var rect = canvas.getBoundingClientRect(); var scaleX = canvas.width / rect.width; var scaleY = canvas.height / rect.height; var clientX = e.clientX; var clientY = e.clientY; if (e.touches && e.touches[0]) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; } return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }; } var drawing = false; var last = null; function drawDot(point) { ctx.fillStyle = colorInput.value; var radius = (parseInt(sizeInput.value, 10) * (window.devicePixelRatio || 1)) / 2; ctx.beginPath(); ctx.arc(point.x, point.y, Math.max(0.5, radius), 0, Math.PI * 2); ctx.fill(); } function startDraw(e) { if (e.type === 'mousedown' && e.button !== 0) return; if (e.cancelable) e.preventDefault(); drawing = true; last = getCoords(e); if (e.pointerId != null && canvas.setPointerCapture) { canvas.setPointerCapture(e.pointerId); } drawDot(last); } function moveDraw(e) { if (!drawing) return; if (e.cancelable) e.preventDefault(); var p = getCoords(e); ctx.strokeStyle = colorInput.value; ctx.lineWidth = parseInt(sizeInput.value, 10) * (window.devicePixelRatio || 1); ctx.beginPath(); ctx.moveTo(last.x, last.y); ctx.lineTo(p.x, p.y); ctx.stroke(); last = p; } function endDraw(e) { if (e && e.cancelable) e.preventDefault(); if (e && e.pointerId != null && canvas.releasePointerCapture) { try { canvas.releasePointerCapture(e.pointerId); } catch (err) { /* ignore browsers that throw if capture was not set */ } } drawing = false; last = null; } function saveToHiddenFields() { dataUrlField.value = canvas.toDataURL('image/png'); filenameField.value = suggestedFilename(); } var hasPointer = 'PointerEvent' in window; if (hasPointer) { canvas.addEventListener('pointerdown', startDraw); canvas.addEventListener('pointermove', moveDraw); canvas.addEventListener('pointerup', endDraw); canvas.addEventListener('pointercancel', endDraw); canvas.addEventListener('pointerleave', endDraw); } else { canvas.addEventListener('mousedown', startDraw); window.addEventListener('mousemove', moveDraw); window.addEventListener('mouseup', endDraw); canvas.addEventListener('touchstart', startDraw, { passive: false }); canvas.addEventListener('touchmove', moveDraw, { passive: false }); canvas.addEventListener('touchend', endDraw, { passive: false }); canvas.addEventListener('touchcancel', endDraw, { passive: false }); } btnClear.addEventListener('click', function () { ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); saveToHiddenFields(); }); btnDownload.addEventListener('click', function () { var name = suggestedFilename(); saveToHiddenFields(); canvas.toBlob(function (blob) { if (!blob) return; var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = name; a.click(); URL.revokeObjectURL(url); }, 'image/png'); }); function init() { resizeCanvasToDisplaySize(); ctx.fillStyle = '#ffffff'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.lineCap = 'round'; ctx.lineJoin = 'round'; filenamePreview.textContent = 'Download / submit will use a name like: ' + suggestedFilename(); } window.addEventListener('resize', function () { resizeCanvasToDisplaySize(); saveToHiddenFields(); }); init(); saveToHiddenFields(); })();