HTML5/Javascript Scratchcard Script

We were recently asked by a client to create an online scratchcard that was compatible with both desktop and mobile devices. We were so pleased with the result, we thought we would share the code so everyone can create this nifty little scratchcard!

The JavaScript

In the JavaScript, make sure the container and canvas variables match the ID’s of the container and canvas elements.

Note: On line 15 (image.src) this is a base64 encoded PNG. To change the scratchcard image to one of your choice, you will need to convert a PNG into base64 format, then copy and paste the code replacing the current value. You can convert PNG to base64 using an online converter such as b64.io.

Conclusion

The above code will get you started in creating your very own HTML5/JavaScript/jQuery scratchcard that works on desktop, tablet and mobile. You will of course need to change the scratch image for one of your choice using a base64 encoded PNG image.

If you have any comments, suggestions or need any help then please let us know in the comments… Enjoy!