The scratch-card-with-canvas is a small plugin that helps you to build a scratch card functionality. It is a great plugin that works just like scratching of any of the prepaid cards.
The goal of the plugin to hide the coupon code or wining number behind the card that will start showing as you continue with scratching.
The user needs to keep press the mouse left click and move it over the card. As you do that, the card will scratch and start showing the number behind it.
The plugin developed purely in Vanilla Javascript which means, its lightweight and load fast. It’s a tiny plugin that doesn’t have too much code. All you need to include its main Javascript and create the markup.
In addition, the Javascript Scratch Card plugin allows the user to place the number or text behind the scratch card area.
Moreover, the user can easily scratch the card using the cursor or touch swipe. It shows a real-time scratching animation.
How to Create a JavaScript Scratch Card
As its a stand-alone Javascript plugin that means you don’t require to load the jQuery file. All you need to load the scratch card JS file into your HTML document and done.
<script src="js/scratch-card.js"></script>After that, we will create the HTML structure which is simple and easy. We will define the main wrapper with the class name card then place a child div with a class name base.
This base div will hold the coupon or scratch number that you want to stay hide until the card is scratched.
To cover the number we will use the HTML canvas an element, so the card number will not show until the card, is stretched.
<div class="card">
<div class="base">Your Card Number: 0123456789</div>
<canvas id="scratch" width="300" height="60"></canvas>
</div>Our last step to style the card to make it look good. You can customize the CSS to make it look as you want.
.card{
width: 300px;
height: 60px;
position: relative;
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
margin: 10px auto;
}
.base, #scratch {
cursor: default;
height: 60px;
width: 300px;
position: absolute;
top: 0;
left: 0;
}
.base {
line-height: 60px;
text-align: center;
}
#scratch {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-touch-callout: none;
-webkit-user-select: none;
}That’s it.