This is a library for turning canvas elements on your web site into "scratchable" objects. You can also set a required percentage of space to be revealed for the task to be completed.
- canvas elements with background images that need to be hidden
- all canvas elements need to have an ID to select them
- a browser with a working
.bind()function - no jQuery just plain JavaScript
1. Add the library to your site's head. Use the minified version for production and the unminified version for development.
<head>
<!-- all stuff you are using -->
<script type="text/javascript" src="scripts/scratchcard.min.js"></script>
</head>var options = {
id: 'yourCanvasID',
brushSize: 50,
lineJoin: 'round',
percentRequired: 80,
fillColor: 'rgb(100, 100, 13)'
};-
idis your canvas ID as a string. -
brushSizedetermines how much area the brush should remove as a integer. -
lineJoindetermines how the lines of the revealed area are going to be joined together. Must be one ofbevel,roundormiteras a string. -
percentRequireddetermines how much space should be revealed for the success event to be fired. Should be an integer. -
fillColorsets the color of the fill that hides the image. This can be all of the CSS color values but has to be put in as a string.
var yourScratchCard = new ScratchCard(options);yourScratchCard.addEventListener('success', function (e) {
alert('You can do whatever you want here!');
}, false);If you find any bugs please open up an issue. If you added any features propose a pull request and I will look into it.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent