Let me say that canvas support is better than ever with all major browsers now supporting it. In the past this was always a weak point for canvas as IE8 had no canvas support (without hacks), so the case for using canvas was limited. Until now. Unfortunately the documentation for canvas is a little fragmented and getting a good grip on all the nuances and features can be a bit frustrating. But this article isn’t about me teaching you canvas, it’s about how canvas can be used to build a scratch off card without having to use a lick of Flash.
What shocked me the most was how basic the final code I came up with was that accomplished the effect. The Actionscript for a Flash scratch off is no walk in the park, but the canvas version is very neat and clean. In fact, the function that does the heavy lifting is just six lines long. Six lines! And the weird part there is that none of the savings happens to come from jQuery. jQuery does show its strength in the rest of my code by handing the various mouse movements and DOM manipulations, in a total of about 45 lines of code. Awesome.
So I present to you a jQuery/Canvas scratch off that requires no Flash. Move your mouse over the scratch card and you’ll see a coin follow your mouse. Click and drag and you’ll soon be on your way to scratching to reveal the prize below the top layer. Voilà!
How it Works
The mousedown event is where the scratch effect takes place. This bit of code comes from a trick I borrowed from my Flash scratch off creation days. While it looks like you’re removing parts of the “top” layer to reveal the “bottom” layer, you’re actually drawing parts of the bottom layer on top of the top layer using the canvas element’s clip() method. Basically we’re drawing an arc (circle) and then clipping it to unmask, or reveal, part of the bottom layer image which is then drawn over the top image on our main canvas. In other words, we first draw our circle shape and then combine that with the bottom image so that only that part of the bottom image is used. We then apply that clipped image and draw it onto our main canvas, thus creating the scratch off effect. We repeatedly save and restore our clipping path to build it up as we continually click and drag. Did I mention that the effect takes just six lines of code?!
Unfortunately neither the canvas element nor jQuery have any built-in collision detection like Flash does. If either one did then this would have allowed me to find out how much scratching someone had done and complete the process for them when they had scratched enough. For example, if they had scratched away 80% of the top layer (actually drawing 80% of the bottom layer but let’s not split hairs) then we could remove the rest of the little pieces automatically. Not a necessity by any means, but it would have been a nice touch. If anyone knows of an easy way to do this that doesn’t add tons of code or eat memory then let me know.
So there you have it. All you need are three images (top layer, bottom layer, and coin) and this code. You could conceivable get rid of the overlay canvas and coin, however I’ve found it a little more user-friendly to have the coin in there so that the user doesn’t just see the mouse cursor poking holes in the image. You could also use PHP to dynamically create the bottom image so that it randomly changed.
This code is licensed under the Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0) (http://creativecommons.org/licenses/by-nc-sa/3.0/). For commercial use, please email email@example.com.