<div class="d-flex flex-column align-items-center justify-content-center vh-100">
  <h1 class="text-center mb-5">Scratch Below</h1>

  <i class="fas fa-arrow-down fa-6x mb-4"></i>
  <div class="row mt-5">
    <div class="col-md-4 col-sm-6 col-8">
      <div id="card" class="mx-auto border position-relative bg-white">
        <div id="code" class="text-center"></div>
        <canvas class="position-absolute top-0 start-0" id="scratch-pad"></canvas>
      </div>
    </div>
  </div>
</div>

@import url("https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
body {
  font-family: "DM Mono", monospace;
  background-color: #f3f1f5;
  cursor: url("https://essykings.github.io/JavaScript/coin42.png")
            53 53,
          crosshair;
}
#card {
  width: 400px;
  height: 90px;
}
#code {
  font-size: 50px;
  padding: 20px;
  background-color: #fff;
  line-height: 40px;
  font-weight: 800;
}
canvas {
/*   cursor: url("https://essykings.github.io/JavaScript/coin42.png") 50 50,
    pointer; */
}

const card = document.getElementById("card");
const canvas = document.getElementById("scratch-pad");
const ctx = canvas.getContext("2d");

function generateRandomCode(length) {
  const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  let code = "";
  for (let i = 0; i < length; i++) {
    code += characters.charAt(Math.floor(Math.random() * characters.length));
  }
  return code;
}
document.getElementById("code").textContent = generateRandomCode(12);

canvas.width = card.offsetWidth;
canvas.height = card.offsetHeight;

const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, "#DFBD69");
gradient.addColorStop(1, "#926F34");

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);

let isDrawing = false;
canvas.addEventListener("mousemove", (e) => {
  isDrawing = true;
  scratch(e);
});

// canvas.addEventListener("mouseup", () => {
//   isDrawing = false;
// });

canvas.addEventListener("touchstart", (e) => {
  isDrawing = true;
  scratch(e.touches[0]);
});

canvas.addEventListener("touchmove", (e) => {
  if (isDrawing) {
    scratch(e.touches[0]);
  }
});

function scratch(e) {
  const rect = canvas.getBoundingClientRect();
  console.log(rect);
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  ctx.globalCompositeOperation = "destination-out";
  ctx.beginPath();
  ctx.arc(x, y, 20, 0, Math.PI * 2, false);
  ctx.fill();
}