How to Create Scratch Card using JavaScript & HTML

				
					//First some constants of id and class are defined
let canvas = document.getElementById("scratch");
let context = canvas.getContext("2d");

const init = () => {
//createLinearGradient() method creates a linear gradient object.
  let gradientColor = context.createLinearGradient(0, 0, 135, 135);
  //addColorStop() method specifies the color stops, and its position along the gradient
  gradientColor.addColorStop(0, "#57acd1");
  gradientColor.addColorStop(1, "#6414e9");
  context.fillStyle = gradientColor;
  // fillRect() method draws a filled rectangle whose starting point is at (x, y)
  context.fillRect(0, 0, 300, 300);
};

//initially mouse X and mouse Y positions are 0
let mouseX = 0;
let mouseY = 0;
let isDragged = false;

//Events for touch and mouse
let events = {
  mouse: {
    down: "mousedown",
    move: "mousemove",
    up: "mouseup",
  },
  touch: {
    down: "touchstart",
    move: "touchmove",
    up: "touchend",
  },
};

let deviceType = "";

//Detech touch device
const isTouchDevice = () => {
  try {
    //We try to create TouchEvent. It would fail for desktops and throw error.
    //CreateEvent as an alias which automatically selects the ANSI
    document.createEvent("TouchEvent");
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

//Get left and top of canvas
//getBoundingClientRect() method returns the size of an element and its position relative to the viewport. 
let rectLeft = canvas.getBoundingClientRect().left;
let rectTop = canvas.getBoundingClientRect().top;

//Exact x and y position of mouse/touch
const getXY = (e) => {
  mouseX = (!isTouchDevice() ? e.pageX : e.touches[0].pageX) - rectLeft;
  mouseY = (!isTouchDevice() ? e.pageY : e.touches[0].pageY) - rectTop;
};

isTouchDevice();
//Start Scratch
//addEventListener() is an inbuilt function in JavaScript
canvas.addEventListener(events[deviceType].down, (event) => {
  isDragged = true;
  //Get x and y position
  getXY(event);
  scratch(mouseX, mouseY);
});

//mousemove/touchmove
canvas.addEventListener(events[deviceType].move, (event) => {
  if (!isTouchDevice()) {
    event.preventDefault();
  }
  if (isDragged) {
    getXY(event);
    scratch(mouseX, mouseY);
  }
});

//stop drawing
canvas.addEventListener(events[deviceType].up, () => {
  isDragged = false;
});

//If mouse leaves the square
canvas.addEventListener("mouseleave", () => {
  isDragged = false;
});

const scratch = (x, y) => {
  //destination-out draws new shapes behind the existing canvas content
  //globalCompositeOperation property sets or returns how a source (new) image are drawn
  context.globalCompositeOperation = "destination-out";
  //beginPath() method begins a path, or resets the current path
  context.beginPath();
  //arc makes circle - x,y,radius,start angle,end angle
  context.arc(x, y, 12, 0, 2 * Math.PI);
  context.fill();
};

//onload event occurs when an object has been loaded.
window.onload = init();