Harry Styles Coloring Pages

Celebrate with style — color 10 free printable Harry Styles coloring pages. From his signature stage looks and Love on Tour outfits to album-era fashion moments, playful poses, and those iconic moves — this collection captures the charisma and style of one of pop’s most beloved performers.

Harry Styles Plaid Boa Simple

Harry Styles Plaid Boa Dynamic

Harry Styles Pink Shirt Sailor Pants Simple

Harry Styles Pink Shirt Sailor Pants Dynamic

Harry Styles Harlequin Jumpsuit Simple

Harry Styles Harlequin Jumpsuit Dynamic

Harry Styles Checker Pants Simple

Harry Styles Checker Pants Dynamic

Harry Styles Black Flower Suit Simple

Harry Styles Black Flower Suit Dynamic

Size:

Palette:

Hold Space to pan

✋ One finger to draw

✋✋ Two fingers to pan & zoom

' ); pwin.document.close(); }); }// ============================================================ // ZOOM // ============================================================ function setZoom(level, anchorX, anchorY) { var oldZoom = zoomLevel; zoomLevel = Math.max(minZoom, Math.min(maxZoom, Math.round(level * 100) / 100)); if (zoomLevel === oldZoom) return; var newW = Math.round(baseDisplayW * zoomLevel); var newH = Math.round(baseDisplayH * zoomLevel); canvas.style.width = newW + 'px'; canvas.style.height = newH + 'px'; zoomLabel.textContent = Math.round(zoomLevel * 100) + '%'; if (typeof anchorX === 'number' && typeof anchorY === 'number') { var ratio = zoomLevel / oldZoom; wrap.scrollLeft = (wrap.scrollLeft + anchorX) * ratio - anchorX; wrap.scrollTop = (wrap.scrollTop + anchorY) * ratio - anchorY; } if (hint) { if (zoomLevel > 1) { hint.textContent = 'Hold Space to pan \u00b7 Scroll to zoom'; hint.classList.add('zoomed'); } else { hint.textContent = 'Hold Space to pan'; hint.classList.remove('zoomed'); } } } function calcBaseDisplay() { var maxW = wrap.clientWidth - 32; var maxH = wrap.clientHeight - 32; var scale = Math.min(maxW / canvas.width, maxH / canvas.height, 1); baseDisplayW = Math.round(canvas.width * scale); baseDisplayH = Math.round(canvas.height * scale); } wrap.addEventListener('wheel', function(e) { if (!ct.classList.contains('active')) return; e.preventDefault(); var delta = e.deltaY > 0 ? -0.15 : 0.15; var rect = wrap.getBoundingClientRect(); setZoom(zoomLevel + delta, e.clientX - rect.left, e.clientY - rect.top); }, { passive: false }); wrap.addEventListener('keydown', function(e) { if (e.key === ' ') e.preventDefault(); }, { passive: false });// ============================================================ // TOUCH GESTURES // ============================================================ function applyPendingScroll() { rafScheduled = false; if (pendingScrollX !== null) { wrap.scrollLeft = pendingScrollX; pendingScrollX = null; } if (pendingScrollY !== null) { wrap.scrollTop = pendingScrollY; pendingScrollY = null; } } function scheduleScroll(x, y) { pendingScrollX = x; pendingScrollY = y; if (!rafScheduled) { rafScheduled = true; requestAnimationFrame(applyPendingScroll); } } function cancelActiveStroke() { if (isDrawing) { isDrawing = false; ctx.globalAlpha = 1.0; } if (isPanning) { isPanning = false; wrap.classList.remove('panning-active'); } } wrap.addEventListener('touchstart', function(e) { if (e.touches.length === 2) { cancelActiveStroke(); touchMode = 'gesture'; lastPinchDist = Math.hypot( e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY ); lastPinchMidX = (e.touches[0].clientX + e.touches[1].clientX) / 2; lastPinchMidY = (e.touches[0].clientY + e.touches[1].clientY) / 2; } }, { passive: true }); wrap.addEventListener('touchmove', function(e) { if (e.touches.length === 2 && touchMode === 'gesture') { e.preventDefault(); var dist = Math.hypot( e.touches[0].clientX - e.touches[1].clientX, e.touches[0].clientY - e.touches[1].clientY ); var midX = (e.touches[0].clientX + e.touches[1].clientX) / 2; var midY = (e.touches[0].clientY + e.touches[1].clientY) / 2; var rect = wrap.getBoundingClientRect(); var panDX = midX - lastPinchMidX; var panDY = midY - lastPinchMidY; var newSL = wrap.scrollLeft - panDX; var newST = wrap.scrollTop - panDY; if (lastPinchDist > 0) { var scale = dist / lastPinchDist; if (Math.abs(scale - 1) > 0.01) { wrap.scrollLeft = newSL; wrap.scrollTop = newST; setZoom(zoomLevel * scale, midX - rect.left, midY - rect.top); } else { scheduleScroll(newSL, newST); } } else { scheduleScroll(newSL, newST); } lastPinchDist = dist; lastPinchMidX = midX; lastPinchMidY = midY; } }, { passive: false }); wrap.addEventListener('touchend', function(e) { if (touchMode === 'gesture' && e.touches.length < 2) { touchMode = 'none'; lastPinchDist = 0; } }, { passive: true }); wrap.addEventListener('touchcancel', function(e) { if (e.touches.length < 2) { touchMode = 'none'; lastPinchDist = 0; } }, { passive: true });// ============================================================ // PAN // ============================================================ function startPan(e) { isPanning = true; panStartX = (typeof e.clientX === 'number') ? e.clientX : (e.touches ? e.touches[0].clientX : 0); panStartY = (typeof e.clientY === 'number') ? e.clientY : (e.touches ? e.touches[0].clientY : 0); panScrollX = wrap.scrollLeft; panScrollY = wrap.scrollTop; wrap.classList.add('panning-active'); } function doPan(e) { if (!isPanning) return; var x = (typeof e.clientX === 'number') ? e.clientX : (e.touches ? e.touches[0].clientX : 0); var y = (typeof e.clientY === 'number') ? e.clientY : (e.touches ? e.touches[0].clientY : 0); scheduleScroll(panScrollX - (x - panStartX), panScrollY - (y - panStartY)); } function endPan() { isPanning = false; wrap.classList.remove('panning-active'); } canvas.addEventListener('mousedown', function(e) { if (e.button === 1) { e.preventDefault(); startPan(e); } });// ============================================================ // CURSOR // ============================================================ function updateCursor(e) { if (!ct.classList.contains('active')) return; cursorEl.style.left = (e.clientX || 0) + 'px'; cursorEl.style.top = (e.clientY || 0) + 'px'; var rect = canvas.getBoundingClientRect(); var displaySize = brushSize; if (rect.width > 0 && canvas.width > 0) { displaySize = brushSize * (rect.width / canvas.width); } displaySize = Math.max(displaySize, 6); cursorEl.style.width = displaySize + 'px'; cursorEl.style.height = displaySize + 'px'; } function updateCursorStyle() { cursorEl.className = 'cpg-ct-cursor'; if (inPanMode()) { cursorEl.classList.add('pan'); canvas.style.cursor = 'grab'; wrap.classList.add('panning'); } else if (currentTool === 'fill') { cursorEl.classList.add('fill'); canvas.style.cursor = 'cell'; wrap.classList.remove('panning'); } else { cursorEl.classList.add(currentTool); canvas.style.cursor = 'none'; wrap.classList.remove('panning'); } if (currentTool === 'eraser') { cursorEl.style.borderColor = 'rgba(255,0,0,.4)'; } else { cursorEl.style.borderColor = currentColor.toUpperCase() === '#FFFFFF' ? 'rgba(0,0,0,.3)' : currentColor; } } document.addEventListener('mousemove', function(e) { updateCursor(e); if (isPanning) doPan(e); }); document.addEventListener('mouseup', function(e) { if (isPanning) endPan(); }); canvas.addEventListener('mouseenter', function() { if (!inPanMode() && currentTool !== 'fill') cursorEl.style.display = 'block'; }); canvas.addEventListener('mouseleave', function() { cursorEl.style.display = 'none'; });// ============================================================ // SIZE PREVIEW // ============================================================ var sizeSlider = ct.querySelector('.cpg-ct-size-slider'); var sizePreview = ct.querySelector('.cpg-ct-size-preview'); function updateSizePreview() { var px = Math.max(brushSize, 4); px = Math.min(px, 40); sizePreview.style.width = px + 'px'; sizePreview.style.height = px + 'px'; sizePreview.style.background = currentColor; } sizeSlider.addEventListener('input', function() { brushSize = parseInt(this.value); updateSizePreview(); });// ============================================================ // MOBILE HINT // ============================================================ function maybeShowMobileHint() { if (!isTouchDevice) return; var seen = false; try { seen = window.localStorage && localStorage.getItem(HINT_KEY); } catch(e) {} if (seen) return; mobileHint.classList.add('show'); } mobileHintOk.addEventListener('click', function() { mobileHint.classList.remove('show'); try { localStorage.setItem(HINT_KEY, '1'); } catch(e) {} });// ============================================================ // COLOR SELECTION // ============================================================ function setActiveColorButton(targetBtn) { ct.querySelectorAll('.cpg-ct-color').forEach(function(b) { b.classList.remove('active'); }); if (targetBtn) targetBtn.classList.add('active'); } function selectColor(hex, sourceBtn) { currentColor = hex; setActiveColorButton(sourceBtn || null); updateCursorStyle(); updateSizePreview(); } paletteEl.addEventListener('click', function(e) { var btn = e.target.closest('.cpg-ct-color'); if (!btn || !paletteEl.contains(btn)) return; var color = btn.getAttribute('data-color'); if (color) selectColor(color, btn); });// ============================================================ // CUSTOM COLOR PICKER // ============================================================ var pickerModal = document.getElementById('cpg-ct-picker-modal'); var pickerBtn = document.getElementById('cpg-ct-picker-btn'); var pickerSv = document.getElementById('cpg-ct-picker-sv'); var pickerSvMark = document.getElementById('cpg-ct-picker-sv-marker'); var pickerHue = document.getElementById('cpg-ct-picker-hue'); var pickerHueMark = document.getElementById('cpg-ct-picker-hue-marker'); var pickerPreview = document.getElementById('cpg-ct-picker-preview'); var pickerHex = document.getElementById('cpg-ct-picker-hex'); var pickerClose = document.getElementById('cpg-ct-picker-close'); var pickerOk = document.getElementById('cpg-ct-picker-ok');var pH = 0, pS = 1, pV = 1;function hsvToRgb(h, s, v) { var c = v * s; var hp = (h / 60) % 6; var x = c * (1 - Math.abs(hp % 2 - 1)); var m = v - c; var r = 0, g = 0, b = 0; if (hp >= 0 && hp < 1) { r = c; g = x; } else if (hp < 2) { r = x; g = c; } else if (hp < 3) { g = c; b = x; } else if (hp < 4) { g = x; b = c; } else if (hp < 5) { r = x; b = c; } else { r = c; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) }; } function rgbToHsv(r, g, b) { r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var d = max - min; var h = 0, s = max === 0 ? 0 : d / max, v = max; if (d !== 0) { if (max === r) h = ((g - b) / d) % 6; else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; if (h < 0) h += 360; } return { h: h, s: s, v: v }; } function rgbToHex(r, g, b) { return '#' + [r, g, b].map(function(c) { var s = c.toString(16); return s.length === 1 ? '0' + s : s; }).join('').toUpperCase(); } function hexToRgb(hex) { hex = hex.replace('#',''); if (hex.length === 3) hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2]; if (!/^[0-9A-Fa-f]{6}$/.test(hex)) return null; var n = parseInt(hex, 16); return { r:(n>>16)&255, g:(n>>8)&255, b:n&255 }; } function getPickerHex() { var rgb = hsvToRgb(pH, pS, pV); return rgbToHex(rgb.r, rgb.g, rgb.b); } function refreshPickerUI() { pickerSv.style.background = 'linear-gradient(to top, #000, transparent),' + 'linear-gradient(to right, #fff, hsl(' + pH + ', 100%, 50%))'; pickerSvMark.style.left = (pS * 100) + '%'; pickerSvMark.style.top = ((1 - pV) * 100) + '%'; pickerHueMark.style.left = ((pH / 360) * 100) + '%'; var hex = getPickerHex(); pickerPreview.style.background = hex; pickerHex.value = hex.replace('#', ''); pickerHex.classList.remove('invalid'); } function openPicker() { var rgb = hexToRgb(currentColor); if (rgb) { var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); pH = hsv.h; pS = hsv.s; pV = hsv.v; } refreshPickerUI(); pickerModal.classList.add('show'); pickerModal.setAttribute('aria-hidden', 'false'); } function closePicker() { pickerModal.classList.remove('show'); pickerModal.setAttribute('aria-hidden', 'true'); } pickerBtn.addEventListener('click', openPicker); pickerClose.addEventListener('click', closePicker); pickerModal.addEventListener('click', function(e) { if (e.target === pickerModal) closePicker(); }); pickerOk.addEventListener('click', function() { addCustomColor(getPickerHex()); closePicker(); });function getEventPoint(e) { if (e.touches && e.touches.length > 0) return { x: e.touches[0].clientX, y: e.touches[0].clientY }; return { x: e.clientX, y: e.clientY }; } function attachDrag(el, onMove) { var dragging = false; function start(e) { dragging = true; if (e.cancelable) e.preventDefault(); onMove(e, el); } function move(e) { if (!dragging) return; if (e.cancelable) e.preventDefault(); onMove(e, el); } function end() { dragging = false; } el.addEventListener('mousedown', start); document.addEventListener('mousemove', move); document.addEventListener('mouseup', end); el.addEventListener('touchstart', start, { passive: false }); document.addEventListener('touchmove', move, { passive: false }); document.addEventListener('touchend', end); document.addEventListener('touchcancel', end); } attachDrag(pickerSv, function(e, el) { var rect = el.getBoundingClientRect(); var p = getEventPoint(e); var x = Math.max(0, Math.min(rect.width, p.x - rect.left)); var y = Math.max(0, Math.min(rect.height, p.y - rect.top)); pS = x / rect.width; pV = 1 - (y / rect.height); refreshPickerUI(); }); attachDrag(pickerHue, function(e, el) { var rect = el.getBoundingClientRect(); var p = getEventPoint(e); var x = Math.max(0, Math.min(rect.width, p.x - rect.left)); pH = (x / rect.width) * 360; if (pH >= 360) pH = 359.99; refreshPickerUI(); }); pickerHex.addEventListener('input', function() { var v = this.value.trim().replace('#', ''); var rgb = hexToRgb(v); if (rgb) { var hsv = rgbToHsv(rgb.r, rgb.g, rgb.b); if (hsv.s > 0) pH = hsv.h; pS = hsv.s; pV = hsv.v; pickerSv.style.background = 'linear-gradient(to top, #000, transparent),' + 'linear-gradient(to right, #fff, hsl(' + pH + ', 100%, 50%))'; pickerSvMark.style.left = (pS * 100) + '%'; pickerSvMark.style.top = ((1 - pV) * 100) + '%'; pickerHueMark.style.left = ((pH / 360) * 100) + '%'; pickerPreview.style.background = '#' + v.toUpperCase(); this.classList.remove('invalid'); } else { this.classList.add('invalid'); } }); pickerHex.addEventListener('blur', function() { refreshPickerUI(); }); pickerHex.addEventListener('keydown', function(e) { if (e.key === 'Enter') { e.preventDefault(); pickerOk.click(); } });function addCustomColor(hex) { hex = hex.toUpperCase(); var existing = customPaletteEl.querySelector('.cpg-ct-color[data-color="' + hex + '"]'); if (existing) { selectColor(hex, existing); return; } var defaultExisting = defaultPaletteEl.querySelector('.cpg-ct-color[data-color="' + hex + '"]'); if (defaultExisting) { selectColor(hex, defaultExisting); return; } customColors.unshift(hex); if (customColors.length > maxCustomColors) customColors.pop(); customPaletteEl.innerHTML = ''; customColors.forEach(function(c) { var btn = document.createElement('button'); btn.className = 'cpg-ct-color cpg-ct-color-custom'; btn.setAttribute('data-color', c); btn.setAttribute('title', c); btn.style.background = c; if (c.toUpperCase() === '#FFFFFF') btn.style.borderColor = '#ccc'; customPaletteEl.appendChild(btn); }); var newBtn = customPaletteEl.querySelector('.cpg-ct-color[data-color="' + hex + '"]'); selectColor(hex, newBtn); }// ============================================================ // OPEN / CLOSE TOOL // ============================================================ window.pcOpenColoringTool = function(imageUrl, options) { if (!imageUrl) return; options = options || {};currentImageUrl = imageUrl; currentPageId = options.pageId || imageUrl.split('/').pop().replace(/\.[^.]+$/, ''); currentPageTitle = options.pageTitle || document.title || 'Coloring Page'; currentCategory = options.category || null;var initialPalette = 'classic'; if (currentCategory && CATEGORY_PALETTE_MAP[currentCategory.toLowerCase()]) { initialPalette = CATEGORY_PALETTE_MAP[currentCategory.toLowerCase()]; } renderPalette(initialPalette); currentColor = PALETTE_PRESETS[initialPalette].colors[0];customColors = []; customPaletteEl.innerHTML = ''; pageTitleEl.textContent = currentPageTitle;ct.classList.add('active'); ct.setAttribute('aria-hidden', 'false'); document.body.style.overflow = 'hidden'; updateCursorStyle(); updateSizePreview(); updateDraftBadge();// Kick off logo preload in background so Download/Print are instant ensureBrandLogoLoaded();var img = new Image(); img.crossOrigin = 'anonymous'; img.onload = function() { var maxDim = 3000; var scale = Math.min(maxDim / img.width, maxDim / img.height, 1); canvas.width = Math.round(img.width * scale); canvas.height = Math.round(img.height * scale);ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0, canvas.width, canvas.height);baseImageData = ctx.getImageData(0, 0, canvas.width, canvas.height); undoStack = []; saveUndo();calcBaseDisplay(); zoomLevel = 1; canvas.style.width = baseDisplayW + 'px'; canvas.style.height = baseDisplayH + 'px'; zoomLabel.textContent = '100%';wrap.scrollLeft = (canvas.offsetWidth - wrap.clientWidth) / 2; wrap.scrollTop = (canvas.offsetHeight - wrap.clientHeight) / 2;maybeShowMobileHint();// If drafts exist for this page, show clickable toast var n = pageDrafts().length; if (n > 0) { setTimeout(function() { showToast( 'You have ' + n + ' saved draft' + (n === 1 ? '' : 's') + ' — tap to view', { onClick: openDraftsModal, duration: 5000 } ); }, 500); } }; img.onerror = function() { showToast('Could not load the image — please try again', { error: true }); closeColoringTool(); }; img.src = imageUrl; };function closeColoringTool() { ct.classList.remove('active'); ct.setAttribute('aria-hidden', 'true'); document.body.style.overflow = ''; cursorEl.style.display = 'none'; wrap.classList.remove('panning', 'panning-active'); mobileHint.classList.remove('show'); closePicker(); closeDraftsModal(); hideToast(); touchMode = 'none'; cancelActiveStroke(); }ct.querySelectorAll('.cpg-ct-close').forEach(function(el) { el.addEventListener('click', closeColoringTool); });// ============================================================ // UNDO / CLEAR // ============================================================ function saveUndo() { if (undoStack.length >= maxUndo) undoStack.shift(); undoStack.push(ctx.getImageData(0, 0, canvas.width, canvas.height)); } function undo() { if (undoStack.length > 1) { undoStack.pop(); ctx.putImageData(undoStack[undoStack.length - 1], 0, 0); } } function clearCanvas() { if (!baseImageData) return; if (!confirm('Start over? This will erase all your coloring on this canvas. Saved drafts are not affected.')) return; ctx.putImageData(baseImageData, 0, 0); undoStack = []; saveUndo(); }// ============================================================ // TOOL SELECTION + ACTION BUTTONS // ============================================================ ct.querySelectorAll('.cpg-ct-tool').forEach(function(btn) { btn.addEventListener('click', function() { ct.querySelectorAll('.cpg-ct-tool').forEach(function(b) { b.classList.remove('active'); }); btn.classList.add('active'); currentTool = btn.getAttribute('data-tool'); updateCursorStyle(); }); }); ct.querySelectorAll('.cpg-ct-action').forEach(function(btn) { btn.addEventListener('click', function() { var action = btn.getAttribute('data-action'); if (action === 'undo') undo(); if (action === 'clear') clearCanvas(); if (action === 'zoomin') setZoom(zoomLevel + 0.25); if (action === 'zoomout') setZoom(zoomLevel - 0.25); if (action === 'zoomreset') setZoom(1); }); }); ct.querySelectorAll('.cpg-ct-action-btn, .cpg-ct-save').forEach(function(btn) { btn.addEventListener('click', function() { var action = btn.getAttribute('data-action'); if (action === 'save-draft') handleSaveDraft(); else if (action === 'my-drafts') openDraftsModal(); else if (action === 'download') handleDownload(); else if (action === 'print') handlePrint(); }); });// ============================================================ // BRUSH BEHAVIORS // ============================================================ function getPos(e) { var rect = canvas.getBoundingClientRect(); var scaleX = canvas.width / rect.width; var scaleY = canvas.height / rect.height; var clientX, clientY; if (e.touches && e.touches.length > 0) { clientX = e.touches[0].clientX; clientY = e.touches[0].clientY; } else { clientX = e.clientX; clientY = e.clientY; } return { x: (clientX - rect.left) * scaleX, y: (clientY - rect.top) * scaleY }; } function drawMarker(x1, y1, x2, y2) { ctx.globalAlpha = 1.0; ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = currentColor; ctx.lineWidth = brushSize; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } function drawPencil(x1, y1, x2, y2) { ctx.globalAlpha = 0.35; ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = currentColor; ctx.lineWidth = brushSize * 0.5; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; for (var i = 0; i < 3; i++) { var jx = (Math.random() - 0.5) * brushSize * 0.3; var jy = (Math.random() - 0.5) * brushSize * 0.3; ctx.beginPath(); ctx.moveTo(x1 + jx, y1 + jy); ctx.lineTo(x2 + jx, y2 + jy); ctx.stroke(); } ctx.globalAlpha = 1.0; } function drawCrayon(x1, y1, x2, y2) { ctx.globalCompositeOperation = 'source-over'; var dist = Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)); var steps = Math.max(Math.ceil(dist / 2), 1); for (var s = 0; s < steps; s++) { var t = s / steps; var cx = x1 + (x2 - x1) * t; var cy = y1 + (y2 - y1) * t; for (var i = 0; i < 3; i++) { var ox = (Math.random() - 0.5) * brushSize * 0.7; var oy = (Math.random() - 0.5) * brushSize * 0.7; var radius = brushSize * 0.12 + Math.random() * brushSize * 0.12; ctx.globalAlpha = 0.06 + Math.random() * 0.1; ctx.fillStyle = currentColor; ctx.beginPath(); ctx.arc(cx + ox, cy + oy, radius, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = 1.0; } function drawEraser(x1, y1, x2, y2) { ctx.globalAlpha = 1.0; ctx.globalCompositeOperation = 'source-over'; ctx.strokeStyle = '#FFFFFF'; ctx.lineWidth = brushSize; ctx.lineCap = 'round'; ctx.lineJoin = 'round'; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } function drawStroke(x1, y1, x2, y2) { switch (currentTool) { case 'marker': drawMarker(x1, y1, x2, y2); break; case 'pencil': drawPencil(x1, y1, x2, y2); break; case 'crayon': drawCrayon(x1, y1, x2, y2); break; case 'eraser': drawEraser(x1, y1, x2, y2); break; } } function drawDot(x, y) { ctx.globalAlpha = 1.0; ctx.globalCompositeOperation = 'source-over'; if (currentTool === 'crayon') { for (var i = 0; i < 4; i++) { var ox = (Math.random() - 0.5) * brushSize * 0.5; var oy = (Math.random() - 0.5) * brushSize * 0.5; ctx.globalAlpha = 0.06 + Math.random() * 0.08; ctx.fillStyle = currentColor; ctx.beginPath(); ctx.arc(x + ox, y + oy, brushSize * 0.15, 0, Math.PI * 2); ctx.fill(); } ctx.globalAlpha = 1.0; } else if (currentTool === 'pencil') { ctx.globalAlpha = 0.3; ctx.fillStyle = currentColor; ctx.beginPath(); ctx.arc(x, y, brushSize * 0.25, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1.0; } else { ctx.fillStyle = currentTool === 'eraser' ? '#FFFFFF' : currentColor; ctx.beginPath(); ctx.arc(x, y, brushSize / 2, 0, Math.PI * 2); ctx.fill(); } }// ============================================================ // DRAWING EVENTS // ============================================================ function startDraw(e) { if (touchMode === 'gesture') return; if (inPanMode()) { startPan(e); return; } if (currentTool === 'fill') { var pos = getPos(e); floodFill(Math.round(pos.x), Math.round(pos.y), currentColor); saveUndo(); return; } isDrawing = true; var pos2 = getPos(e); lastX = pos2.x; lastY = pos2.y; drawDot(lastX, lastY); } function draw(e) { if (touchMode === 'gesture') return; if (isPanning) { doPan(e); return; } if (!isDrawing) return; if (e.cancelable) e.preventDefault(); var pos = getPos(e); drawStroke(lastX, lastY, pos.x, pos.y); lastX = pos.x; lastY = pos.y; } function endDraw() { if (isPanning) { endPan(); return; } if (isDrawing) { isDrawing = false; ctx.globalAlpha = 1.0; saveUndo(); } } canvas.addEventListener('mousedown', function(e) { if (e.button === 0) startDraw(e); }); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', endDraw); canvas.addEventListener('mouseleave', endDraw); canvas.addEventListener('touchstart', function(e) { if (e.touches.length >= 2) { cancelActiveStroke(); return; } if (touchMode === 'gesture') return; if (e.touches.length === 1) { touchMode = 'draw'; e.preventDefault(); startDraw(e); } }, { passive: false }); canvas.addEventListener('touchmove', function(e) { if (touchMode === 'gesture' || e.touches.length !== 1) return; e.preventDefault(); draw(e); }, { passive: false }); canvas.addEventListener('touchend', function(e) { if (touchMode === 'draw') { touchMode = 'none'; endDraw(); } }); canvas.addEventListener('touchcancel', function(e) { touchMode = 'none'; endDraw(); });// ============================================================ // FLOOD FILL // ============================================================ function floodFill(startX, startY, fillColor) { var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; var w = canvas.width, h = canvas.height; var startIdx = (startY * w + startX) * 4; var targetR = data[startIdx], targetG = data[startIdx+1], targetB = data[startIdx+2], targetA = data[startIdx+3]; var fill = hexToRgb(fillColor); if (!fill) return; if (targetR === fill.r && targetG === fill.g && targetB === fill.b) return; var tolerance = 32; var stack = [[startX, startY]]; var visited = new Uint8Array(w * h); function matches(idx) { return Math.abs(data[idx] - targetR) <= tolerance && Math.abs(data[idx+1] - targetG) <= tolerance && Math.abs(data[idx+2] - targetB) <= tolerance && Math.abs(data[idx+3] - targetA) <= tolerance; } while (stack.length > 0) { var p = stack.pop(); var x = p[0], y = p[1]; if (x < 0 || x >= w || y < 0 || y >= h) continue; var pi = y * w + x; if (visited[pi]) continue; var idx = pi * 4; if (!matches(idx)) continue; visited[pi] = 1; data[idx] = fill.r; data[idx+1] = fill.g; data[idx+2] = fill.b; data[idx+3] = 255; stack.push([x+1,y],[x-1,y],[x,y+1],[x,y-1]); } ctx.putImageData(imageData, 0, 0); }// ============================================================ // KEYBOARD // ============================================================ document.addEventListener('keydown', function(e) { if (!ct.classList.contains('active')) return; if (document.activeElement === pickerHex) return;if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') { e.preventDefault(); handleSaveDraft(); return; } if (e.key === ' ') { e.preventDefault(); if (!spaceHeld) { spaceHeld = true; toolBeforeSpace = currentTool; updateCursorStyle(); } return; } if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undo(); } if (e.key === 'Escape') { if (pickerModal.classList.contains('show')) closePicker(); else if (draftsModal.classList.contains('show')) closeDraftsModal(); else closeColoringTool(); } if (e.key === 'm') selectTool('marker'); if (e.key === 'p') selectTool('pencil'); if (e.key === 'c') selectTool('crayon'); if (e.key === 'f') selectTool('fill'); if (e.key === 'e') selectTool('eraser'); if (e.key === 'h') selectTool('pan'); if (e.key === '+' || e.key === '=') setZoom(zoomLevel + 0.25); if (e.key === '-') setZoom(zoomLevel - 0.25); if (e.key === '0') setZoom(1); }); document.addEventListener('keyup', function(e) { if (!ct.classList.contains('active')) return; if (e.key === ' ' && spaceHeld) { e.preventDefault(); spaceHeld = false; if (isPanning) endPan(); updateCursorStyle(); } }); function selectTool(tool) { ct.querySelectorAll('.cpg-ct-tool').forEach(function(b) { b.classList.remove('active'); }); var btn = ct.querySelector('.cpg-ct-tool[data-tool="'+tool+'"]'); if (btn) { btn.classList.add('active'); currentTool = tool; } updateCursorStyle(); }// ============================================================ // INITIAL RENDER // ============================================================ renderPalette('classic');})();