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.

Something knocked up in canvas would be your best bet for this sort of thing. — Mitya, Aug 10 '12 at 14:09

score 6 · Accepted Answer · answered Aug 10 '12 at 14:14

6

Use html5 canvas element.

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

answered Aug 10 '12 at 14:14

ArtBIT

3,931
28
39

Is it possible to do this for mobile users too, using `touchmove`? – Justin Jul 29 '14 at 20:57
@Justin yes it is, you just need to rename the `onmousedown`, `onmouseup` and `onmousemove` events to the corresponding touch event handlers, and change the `onmousemove` method a bit, since the touch coordinates are handled a bit differently (http://www.w3.org/TR/touch-events/#the-touchmove-event) – ArtBIT Jul 30 '14 at 09:42

score 2 · Answer 2 · answered Aug 10 '12 at 14:14

2

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

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

answered Aug 10 '12 at 14:14

Bill

645
3
11

Javascript erase image with cursor

2 Answers2

Linked