Scratch Card Reveal — Free HTML CSS JS Canvas Snippet

<div class="demo">
  <div class="card">
    <div class="prize">
      <span class="label">YOU WON</span>
      <span class="amount">25% OFF</span>
      <span class="hint">Use code SCRATCH25 at checkout</span>
    </div>
    <canvas class="scratch-layer" width="320" height="180"></canvas>
    <div class="reveal-msg">Scratched clear! Code copied below.</div>
  </div>
  <button class="reset-btn" type="button">Reset card</button>
</div>

.demo {
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background: linear-gradient(135deg, #1e1b4b, #312e81);
}
.card {
  position: relative;
  width: 320px;
  height: 180px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
}
.prize {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(135deg, #f59e0b, #ec4899);
  color: #fff;
  text-align: center;
}
.prize .label {
  font-size: 12px;
  letter-spacing: 2px;
  opacity: 0.85;
}
.prize .amount {
  font-size: 32px;
  font-weight: 800;
}
.prize .hint {
  font-size: 13px;
  background: rgba(0,0,0,0.2);
  padding: 4px 12px;
  border-radius: 999px;
}
.scratch-layer {
  position: absolute;
  inset: 0;
  cursor: grab;
  touch-action: none;
}
.scratch-layer.cleared {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.reveal-msg {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: rgba(15,23,42,0.85);
  color: #fff;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
  white-space: nowrap;
}
.reveal-msg.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.reset-btn {
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.08);
  color: #e5e7eb;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.reset-btn:hover {
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.4);
}

const canvas = document.querySelector('.scratch-layer');
const ctx = canvas.getContext('2d');
const card = document.querySelector('.card');
const msg = document.querySelector('.reveal-msg');
const resetBtn = document.querySelector('.reset-btn');

const CLEAR_THRESHOLD = 0.55;
let scratching = false;
let cleared = false;

function paintLayer() {
  const grad = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
  grad.addColorStop(0, '#cbd5e1');
  grad.addColorStop(1, '#94a3b8');
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = 'rgba(15,23,42,0.55)';
  ctx.font = '700 16px system-ui, sans-serif';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  ctx.fillText('SCRATCH HERE', canvas.width / 2, canvas.height / 2);

  ctx.globalCompositeOperation = 'source-over';
}

function reset() {
  cleared = false;
  canvas.classList.remove('cleared');
  msg.classList.remove('show');
  paintLayer();
}

function pointerPos(e) {
  const rect = canvas.getBoundingClientRect();
  const point = e.touches ? e.touches[0] : e;
  return {
    x: ((point.clientX - rect.left) / rect.width) * canvas.width,
    y: ((point.clientY - rect.top) / rect.height) * canvas.height,
  };
}

function scratchAt(x, y) {
  ctx.globalCompositeOperation = 'destination-out';
  ctx.beginPath();
  ctx.arc(x, y, 18, 0, Math.PI * 2);
  ctx.fill();
}

function checkCleared() {
  if (cleared) return;
  const pixels = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  let transparent = 0;
  for (let i = 3; i < pixels.length; i += 4) {
    if (pixels[i] < 30) transparent++;
  }
  const ratio = transparent / (pixels.length / 4);
  if (ratio > CLEAR_THRESHOLD) {
    cleared = true;
    canvas.classList.add('cleared');
    msg.classList.add('show');
  }
}

function start(e) {
  scratching = true;
  canvas.style.cursor = 'grabbing';
  const { x, y } = pointerPos(e);
  scratchAt(x, y);
}
function move(e) {
  if (!scratching || cleared) return;
  e.preventDefault();
  const { x, y } = pointerPos(e);
  scratchAt(x, y);
  checkCleared();
}
function end() {
  scratching = false;
  canvas.style.cursor = 'grab';
}

canvas.addEventListener('mousedown', start);
canvas.addEventListener('mousemove', move);
window.addEventListener('mouseup', end);
canvas.addEventListener('touchstart', start, { passive: true });
canvas.addEventListener('touchmove', move, { passive: false });
canvas.addEventListener('touchend', end);

resetBtn.addEventListener('click', reset);

paintLayer();