Create A Scratch Ticket With JavaScript And Canvas – scratch-it

Category: Javascript , Recommended | November 12, 2018
Author:Porcupine021
Views Total:7,077 views
Official Page:Go to website
Last Update:November 12, 2018
License:MIT

Preview:

Create A Scratch Ticket With JavaScript And Canvas – scratch-it

Description:

scratch-it is a JavaScript library to create a responsive, mobile-friendly lottery ticket that reveals the hidden image by scratching off the overlay.

See also:

How to use it:

Embed an image into your scratch ticket.

<div id="scratch">
  <img src="image-to-reveal.jpg">
</div>

Insert the JavaScript file ‘ScratchIt.min.js’ into the document.

<script src="ScratchIt.min.js"></script>

Initialize the scratch-it library and specify the container element, overlay image, and brush image.

  • el: The parent DOM element that the canvas will be appended to
  • overlayUrl: The URL to the image which will be displayed
  • brushUrl: The URL to the image which will act as the brush for erasing the content of the overlay image
if(ScratchIt.isSupported()){
  //  ScratchIt(el, overlayUrl, brushUrl)
  ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png');
}

Applies an event handler to the scratch ticket that will be triggered once 50% of the overlay has been removed.

  • callback: A function to be called after a certain percentage of the overlay image has been removed.
  • threshold: A percentage between 0 and 100. This percentage of pixels must be visible to the user before the revealCallback will be triggered.
function onReveal(){
  // do something
}
if(ScratchIt.isSupported()){
  //  ScratchIt(el, overlayUrl, brushUrl, onReveal, revealPercent)
  ScratchIt(document.getElementById('scratch'), './images/overlay.png', './images/brush1.png', onReveal, 50);
}

Changelog:

11/12/2018

  • fixed for vue.js

You Might Be Interested In:


2 thoughts on “Create A Scratch Ticket With JavaScript And Canvas – scratch-it

Leave a Reply