Javascript erase image with cursor

Question

Is it possible with javascript?

I'm trying to implement a scratchcard type thing, and I was wondering if the user could 'scratch it' with his cursor and then javascript would remove/erase the image to show the text below.

But i've not been able to find anything (javascript wise) which can erase abit (cursor location) of an image.

Does anyone have any suggestions/ideas?

Thanks.

Answer 1

Use html5 canvas element.

Checkout this fiddle for an example: http://jsfiddle.net/ArtBIT/WUXDb/1/

Answer 2

jQuery Plugin: http://www.senamion.com/blog/jScratchcard.html

HTML5: http://www.catchmyfame.com/2011/06/28/a-jquery-canvas-scratch-off/