How to create scratch card using JavaScript
September 27, 2024 • 2 min read

How to create scratch card using JavaScript

HTML5CSS3JavaScript
share this article on

In this tutorial, we’ll walk through the process of creating an interactive scratch card using HTML5, CSS, and JavaScript. We’ll be using the ScratchCard library to handle the scratch functionality.

HTML Structure

Let’s start with the HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scratch card using HTML5 and Canvas</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="sc__wrapper">
        <div id="js--sc--container" class="sc__container">
        </div>
    </div>
</body>
<script src="scratch.min.js"></script>
<script src="script.js"></script>
</html>

This HTML structure creates a container for our scratch card and includes the necessary CSS and JavaScript files.

CSS Styling

Next, let’s style our scratch card with CSS:

.sc__wrapper {
    display: block;
    width: 100%;
    height: 300px;
    max-width: 300px;
    margin: 0 auto;
    border: 5px solid #fff;
}

.sc__container {
    position: relative;
    overflow: hidden;
    height: 300px;
    max-width: 300px;
}

.sc__container > img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.sc__container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}

.inner_html {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    background-image: linear-gradient(90deg, hsla(29, 92%, 70%, 1) 0%, hsla(0, 87%, 73%, 1) 100%);
}

.inner_html p {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    animation: pulse 0.5s ease-in-out infinite both;
    -webkit-animation: pulse 0.5s ease-in-out infinite both;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

This CSS sets up the layout for our scratch card, positions the canvas and images, and adds a pulsing animation for the revealed content.

JavaScript Implementation

Finally, let’s implement the scratch card functionality using JavaScript:

const scContainer = document.getElementById('js--sc--container');
const sc = new ScratchCard('#js--sc--container', {
    scratchType: SCRATCH_TYPE.CIRCLE,
    containerWidth: scContainer.offsetWidth,
    containerHeight: 300,
    imageForwardSrc: '/front-image.png',
    imageBackgroundSrc: '/scratch-image-1.png',
    clearZoneRadius: 30,
    nPoints: 50,
    pointSize: 4,
});

sc.init().then(() => {
    sc.canvas.addEventListener('scratch.move', () => {
        let percent = sc.getPercent().toFixed(0);
        scInfos.innerHTML = percent + '%';
        console.log(percent)
    })
}).catch((error) => {
    alert(error.message);
});

This JavaScript code initializes the ScratchCard object with various options:

  1. scratchType: Sets the scratch effect to a circle.
  2. containerWidth and containerHeight: Define the dimensions of the scratch card.
  3. imageForwardSrc: The image to be scratched off.
  4. imageBackgroundSrc: The image revealed after scratching.
  5. clearZoneRadius: The size of the scratching area.
  6. nPoints and pointSize: Control the density and size of the scratch effect.

The code then initializes the scratch card and adds an event listener to track the scratching progress.

Conclusion

With these three components - HTML, CSS, and JavaScript - you can create an interactive scratch card effect on your web page. The ScratchCard library handles the complex canvas manipulations, making it easy to implement this engaging feature.

Remember to replace the image paths with your actual image files and adjust the styling and dimensions as needed for your specific use case.

Back to Articles