HTML5 jQuery Scratch Pad Plugin

Websanova wScratchPad jQuery Plugin

The Websanova Scratch Pad is a unique one of a kind plugin that allows you to add a scratching effect to images something similar to scratching a lottery ticket. It is written using canvas so you would need an HTML5 compliant browser to use it but it does support a fallback to display a message to upgrade to a newer browser if the browser does not have canvas support. What’s really cool is that it keeps track of the percentage of area scratched so that you can trigger a callback once a user scratches a certain amount of the surface area. Definitely a fun little plugin to entertain your users with.

The most basic setup only requires the location of the image and the dimensions you want to use for the scratch window.

$("#wScratchPad").wScratchPad({
    width: 210,
    height: 100,
    image: "/path/to/image.jpg"
});

You can also modify the color and size of the brush with the following options:

$("#wScratchPad").wScratchPad({
    width: 210,
    height:100,
    image: "/path/to/image.jpg"
    color: "#DD3388",
    size: 5
});

There is also the option to layer an image on top of the other one and scratch that off instead of a background color, this lets you create some interesting looking scratch cards.

$("#wScratchPad").wScratchPad({
    width: 210,
    height:100,
    image: "/path/to/image.jpg"
    image2: "/path/to/image2.jpg"
    size: 5
});

A really nice feature is well is the ability to track the percentage scratch in order trigger some kind of message.

$("#wScratchPad").wScratchPad({
    width: 210,
    height:100,
    image: "/path/to/image.jpg"
    image2: "/path/to/image2.jpg"
    scratchMove: function(e, percent)
    {
        if(percent > 80)
        {
            //do something
        }
    }
});

4 thoughts on “HTML5 jQuery Scratch Pad Plugin

  1. Igor Ikeda

    Hello! My name is Igor Ikeda and was looking for an example to do exactly what the “Scratch” does.
    Very good indeed!

    I would like to take some questions with you. If you can answer me, I’ll be happy.

    1) It is like putting a softening in the “rubber”? Staying with a smooth.
    2) Come to the mouse click. It could be just hover the cursor over?

    Thank you for your attention and congratulations.

    Igor Ikeda

    Reply
  2. Martin Alurralde

    Hi:

    Very nice plugin, Im trying to test it on the android browser but seems not work. Any ideas?

    Thanks!

    Reply
  3. Jeste

    I notice a strange bug, when testing locally (from my hard drive) in Google Chrome, I cannot use image overlay and have the percentage counter working.

    Also, I cannot post a new issue on this site.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>