A light weight javascript library for simulating a scratch off lottery ticket. It works on mobile and is responsive.

A new ScratchIt instance may be instantiated with:

ScratchIt( containerEl, overlayImgUrl, brushImgUrl, onReveal, revealPercent );

The library comes with a simple isSupported() method for testing whether the browser supports the browser technologies necessary to function.

if(ScratchIt.isSupported()){
  // Library is supported
}

<div id="scratch"><img src="hiddenMessage.jpg" /></div>

<script src="ScratchIt.min.js"></script>
<script>
  var containerEl = document.getElementById('scratch'),
      overlayImgUrl = 'overlay.jpg',
      brushImgUrl = 'brush.png',
      revealPercent = 50;

  function onReveal(){
    // TODO: Your code here
  }

  if(ScratchIt.isSupported()){
    ScratchIt(containerEl, overlayImgUrl, brushImgUrl, onReveal, revealPercent);
  }
</script>

Visit the Demo Page to see this library in action.

This library has been tested to work with:

• Chrome
• Safari
• Firefox
• Internet Explorer 9+
• Edge 16+
• Opera 51+
• Android 4.4, 6.0, 7.0, 8.0
• iOS 10+

Other browsers may be supported as well, but have not been tested. This library requires the browser to support HTML5 Canvas and RequestAnimationFrame

If your image assets are hosted on another domain (like a CDN), this host will need to have CORS enabled. CORS is required so that HTML5 canvas may have permission to read the contents of an image from an outside domain. Please note that Internet Explorer 9 does not have the ability to properly fetch images this way and will not work with images hosted on another domain.