Sleeping Beauty Coloring Pages

Enter a world of enchantment with 10 free printable Sleeping Beauty coloring pages. From Princess Aurora’s christening to the evil fairy’s curse, the spindle moment, the hundred-year sleep, and the prince’s awakening kiss — this collection captures one of the most beloved fairy tales of all time.

Sleeping Beauty Three Fairies Cast Magic

Sleeping Beauty Spinning Wheel Chamber Sleep

Sleeping Beauty Sleeping In Bed

Sleeping Beauty Royal Bedchamber Sleep

Sleeping Beauty Rose Vine Chamber Sleep

Sleeping Beauty Rose Bed Sleep

Sleeping Beauty Prince Kneels In Rose Garden

Sleeping Beauty Ornate

Sleeping Beauty Fairy Visits Sleeping Princess

Sleeping Beauty Canopy Bed Sleep

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');})();