Scratchcard-js
ScratchCard is a js lib to simulate a scratchcard in browser with html5 and canvas.
You can see the demo page.
Install
You can install ScratchCard with npm:
npm install --save scratchcard-js
or just clone this repo:
git clone https://github.com/Masth0/ScratchCard.git
and pick in the folder ./build the file scratchard.min.js
Getting started
import {ScratchCard, SCRATCH_TYPE} from 'scratchcard-js'
const scContainer = document.getElementById('js--sc--container')
// You also can pass HTML Element or a string for querySelector
// new ScratchCard(htmlElement...
const sc = new ScratchCard('#js--sc--container', {
scratchType: SCRATCH_TYPE.SPRAY,
containerWidth: scContainer.offsetWidth,
containerHeight: 300,
imageForwardSrc: '/images/scratchcard.jpg',
imageBackgroundSrc: '/images/result.png',
htmlBackground: '<p class="test"><strong>Hello i am HTML content !</strong></p>',
clearZoneRadius: 50,
nPoints: 30,
pointSize: 4,
callback: function () {
alert('Now the window will reload !')
window.location.reload()
}
})
// Init
sc.init().then(() => {
sc.canvas.addEventListener('scratch.move', () => {
let percent = sc.getPercent().toFixed(2)
console.log(percent)
})
}).catch((error) => {
// image not loaded
alert(error.message);
});Events
'scratch.move'
sc.canvas.addEventListener('scratch.move', function() {
let percent = sc.getPercent();
console.log(percent);
});