Touch-enabled Virtual Scratch Card With JavaScript And Canvas – Touch2Reveal

Preview:

Description:

Touch2Reveal is a tiny, dependency-free JavaScript library that has the ability to reveal the hidden with mouse and touch interactions. Similar to the Scratch Card game.

See also:

• Touch-friendly Scratch Card With Pure JavaScript – ScratchCard

How to use it:

Put both Touch2Reveal.css and Touch2Reveal.js into the webpage.

<link rel="stylesheet" href="Touch2Reveal.css">
<script src="Touch2Reveal.js"></script>

Create an empty DIV container with an unique ID as this:

<div id="Touch2Reveal"></div>

Create a new Touch2Reveal object and specify the before / after images.

var touch2reveal;
window.onload = function(){
  touch2reveal = new Touch2Reveal(document.getElementById('Touch2Reveal'),'before.gif','after.jpg',{
    // options here
  });
}

Possible options with default values.

brushSize:window.innerWidth / 20,
softBrush:true,
revealTarget:{},
ratioToShow:.5,
onReveal:function(){}