KOKINIO - MANAGER
Edit File: script.js
const canvas = document.getElementById("scratchCanvas"); const ctx = canvas.getContext("2d"); function resizeCanvas() { canvas.width = canvas.offsetWidth; canvas.height = canvas.offsetHeight; } resizeCanvas(); function createOverlay() { ctx.fillStyle = "#555"; ctx.fillRect(0, 0, canvas.width, canvas.height); } createOverlay(); window.addEventListener("resize", () => { resizeCanvas(); createOverlay(); }); let isScratching = false; canvas.addEventListener("mousedown", startScratch); canvas.addEventListener("mousemove", scratch); canvas.addEventListener("mouseup", endScratch); canvas.addEventListener("mouseleave", endScratch); canvas.addEventListener("touchstart", startScratch, { passive: true }); canvas.addEventListener("touchmove", scratch, { passive: true }); canvas.addEventListener("touchend", endScratch); function startScratch(e) { isScratching = true; scratch(e); } function scratch(e) { if (!isScratching) return; const rect = canvas.getBoundingClientRect(); const x = (e.touches ? e.touches[0].clientX : e.clientX) - rect.left; const y = (e.touches ? e.touches[0].clientY : e.clientY) - rect.top; ctx.globalCompositeOperation = "destination-out"; ctx.beginPath(); ctx.arc(x, y, 25, 0, Math.PI * 2); ctx.fill(); ctx.closePath(); ctx.globalCompositeOperation = "source-over"; } function endScratch() { isScratching = false; }