How to Create Scratch Card using JavaScript & HTML

From this article you will know how to make scratch card using html css and javascript. Here you will find complete step by step tutorial to make JavaScript Scratch Card.

Scratch Card We mainly see coupons or gift cards in many websites. Where the user can see the hidden information by scratching the card.

Earlier I have shared more than 100 JavaScript related tutorials. Hope you will like those tutorials. Making this scratch card is very easy if you know basic html css and javascript.

Scratch Card using JavaScript

This simple scratch card consists of 2 layers. The first layer contains some text or information. There is another layer inside the scratch card to hide that layer. When the user will scratch within that layer, the first layer will be visible.

See the Pen Untitled by Ground Tutorial (@groundtutorial) on CodePen.

As you can see above, this is a simple project (Create Scratch Card using JavaScript). Here first I have created a box in the webpage. Another box is made in that box which will work as Scratch Card. Gradient background color is used in that html scratch card.

Create Scratch Card with HTML CSS JavaScript

Now if you want to know how to make Scratch Card using JavaScript then follow the tutorial below. Here I have used html to create the structure of the project. This simple scratch card is designed by css. Then the Scratch Card is activated by JavaScript.

If you just want the source code, use the download button below the article. But if you are a beginner then I request you to follow the complete tutorial.

Step 1: Basic Structure of Scratch Card

First I created a box on the web page using the following HTML and CSS codes. In that box javascript will see all the infomatin of Scratch Card.

First I used the gradient color in the webpage using linear-gradient.

<div class="container">
 
</div>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background: linear-gradient(135deg, #57acd1, #0758c2);
}
Basic Structure of Scratch Card

The box on the web page is designed using the following css codes. I used width: 21em and height: 21em of the box and used background color white.

.container {
  width: 21em;
  height: 21em;
  background-color: #f5f5f5;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  border-radius: 0.6em;
}
Add scratch card information

Step 2: Add scratch card information

Now add some basic information in this box. Basically, this information can be found in the first layer of the scratch card, which will be hidden. project(Scratch Card using html css JavaScript) uses a shadow around the box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15).

Here box height: 300px, width: 300px is used. Besides, I have used cursor: grabbing here.

<div class="base">
   <h4>You Won</h4>
   <h3>$10</h3>
</div>
.base{
  height: 300px;
  width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
  cursor: grabbing;
  border-radius: 0.3em;
}

.base {
  background-color: #ffffff;
  font-family:  "Poppins", sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1.2em 2.5em rgba(16, 2, 96, 0.15);
}

.base h3 {
  font-weight: 600;
  font-size: 1.5em;
  color: #17013b;
}
.base h4 {
  font-weight: 400;
  color: #746e7e;
}
Add scratch card information

Step 3: Create a second layer of Scratch Card

Now create second layer using canvas. I have kept the width and height of this second layer equal to the first layer. When you scratch over this layer, the first layer will be visible.

The size of this layer is kept equal to the first layer. User-select: none is used so that the user cannot select.

<canvas id="scratch" width="300" height="300"></canvas>
#scratch {
  height: 300px;
  width: 300px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  text-align: center;
  cursor: grabbing;
  border-radius: 0.3em;
}

#scratch {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
Create a second layer of Scratch Card

Step 4: Activate Scratch Card with JavaScript

Now it’s time to implement this simple scratch card using JavaScript. Above we only designed it by html css.

Here I have put all the code together but you have no reason to worry. Below I have provided the necessary explanation and information that will help you.

// Get the canvas element and its 2D drawing context
let canvas = document.getElementById("scratch");
let context = canvas.getContext("2d");

// Function to initialize the canvas with a gradient background
const init = () => {
  let gradientColor = context.createLinearGradient(0, 0, 135, 135);
  gradientColor.addColorStop(0, "#57acd1");
  gradientColor.addColorStop(1, "#6414e9");
  context.fillStyle = gradientColor;
  context.fillRect(0, 0, 300, 300); // Fills the entire canvas with the gradient
};

// Initially set mouse X and Y positions to 0
let mouseX = 0;
let mouseY = 0;
let isDragged = false;

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

let deviceType = "";

// Detect touch device
const isTouchDevice = () => {
  try {
    document.createEvent("TouchEvent"); // Attempt to create a TouchEvent
    deviceType = "touch";
    return true;
  } catch (e) {
    deviceType = "mouse";
    return false;
  }
};

// Get the left and top offsets of the canvas
let rectLeft = canvas.getBoundingClientRect().left;
let rectTop = canvas.getBoundingClientRect().top;

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

isTouchDevice(); // Determine if it's a touch device

// Start scratching when mouse or touch event occurs on canvas
canvas.addEventListener(events[deviceType].down, (event) => {
  isDragged = true;
  // Get x and y position
  getXY(event);
  scratch(mouseX, mouseY); // Scratch at the current position
});

// Handle mousemove/touchmove events
canvas.addEventListener(events[deviceType].move, (event) => {
  if (!isTouchDevice()) {
    event.preventDefault();
  }
  if (isDragged) {
    getXY(event);
    scratch(mouseX, mouseY); // Scratch at the current position while dragging
  }
});

// Stop scratching when mouse or touch is released
canvas.addEventListener(events[deviceType].up, () => {
  isDragged = false;
});

// Stop scratching if mouse leaves the canvas
canvas.addEventListener("mouseleave", () => {
  isDragged = false;
});

// Function to perform scratching effect at a given position (x, y)
const scratch = (x, y) => {
  // Set the global composite operation to "destination-out"
  // This draws new shapes behind the existing canvas content, effectively erasing it
  context.globalCompositeOperation = "destination-out";
  context.beginPath();
  // Draw a circle at the specified position (x, y) with a radius of 12
  context.arc(x, y, 12, 0, 2 * Math.PI);
  context.fill(); // Fill the circle, which erases the content in its area
};

// Initialize the canvas when the window loads
window.onload = init(); // Note: init is called immediately, no need for () which would execute the function and assign its result to window.onload
From this article you will know how to make scratch card using html css and javascript. Here you will find complete step by step tutorial to make JavaScript Scratch Card.

Hope this tutorial has helped you completely to know how I made this Scratch Card using html css and javascript.

Earlier I have created many other projects that help you learn more about JavaScript. Comment how you like this JavaScript Scratch Card Design.

It is not possible to make scratch card only by html. For this you need to use css. But you can make scratch cards without javascript. Of course next time I will tell you how to make scratch card by html css.

Instead of javascript you can also create scratch card using jQuery. But nowadays jQuery is not much used so I used javascript. If you are a beginner then definitely try to build it using javascript.

This simple scratch card design is made by Canvas. But in this I didn’t use animation. You can visit my website for using animations in this JavaScript Scratch Card.

If you want to create Scratch Card with JavaScript and Canvas then you can use this design

Leave a Comment