Okay, so today I wanted to make one of those “zzz check-in” things, but with a scratch-card effect. You know, where you “scratch” off the surface to reveal a prize or something underneath? I thought it would be a fun little project.
Getting Started
First, I needed to figure out what I wanted to have under the scratch-off part. I just went with a simple “You Win!” message. Nothing fancy.
Then I created a basic setup. I made a couple of simple graphics – one for the background, and one for the “scratchable” surface. I just used basic colors.
Building the Scratch-Off
I used a canvas element. That’s the thing that lets you draw graphics with code.
I loaded my “scratchable” surface image onto the canvas.
I needed to make it so that when you move the mouse over the canvas (or touch the screen on a phone), it would “erase” parts of the top image, revealing the background image underneath.
The “Scratching” Code
I added some event listeners. These things listen for actions, like “mousedown” (when you click the mouse button) and “mousemove” (when you move the mouse while holding the button down).
When you click and drag, my code figures out where the mouse is. I set the “globalCompositeOperation” to “destination-out”. That’s the magic part. It makes the drawing act like an eraser. When that’s set it will erase where you draw.
- mousedown: Start drawing.
- mousemove: If we’re drawing, erase at the mouse position.
- mouseup: Stop drawing.
I did a similar thing for touch screens, using “touchstart”, “touchmove”, and “touchend”.
Making it Look Good
I played around with the brush size for the eraser, making it bigger so you don’t have to scribble forever to reveal the message.
I decided I don’t need a fancy “scratch” cursor, the default cursor is fine.
The Finished Thing
And that’s it! I just put my images on the canvas, added the event listeners, and it worked! Now you can scratch off the top layer and see “You Win!” underneath. It was a pretty simple project, but it’s kind of satisfying to “scratch” the card.
