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'constscContainer=document.getElementById('js--sc--container')// You also can pass HTML Element or a string for querySelector// new ScratchCard(htmlElement...constsc=newScratchCard('#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,enabledPercentUpdate: true,// True by defaultpercentToFinish: 50,// enabledPercentUpdate must to be true (true by default)callback: function(){alert('Now the window will reload !')window.location.reload()}})// Initsc.init().then(()=>{sc.canvas.addEventListener('scratch.move',()=>{letpercent=sc.getPercent().toFixed(2)console.log(percent)})}).catch((error)=>{// image not loadedalert(error.message);});

Events

'scratch.move'

sc.canvas.addEventListener('scratch.move',function(){letpercent=sc.getPercent();console.log(percent);});