Round scratch area on scratch will not match the scratch percentage

[daniel-agouveia]

When working with ScratchCard.js I noticed that the scratch area is always a square so I decided to try to round the container so the scratch area would be round the issue I faced was that when scratching the round area part of it would not get scratched because the square corner would not be visible do to the way the CSS rounds corners.

Has anyone tried this before? Is it even possible with the way the scratchCard works?

Steps to Reproduce:

1. Implement the ScratchCard
2. In the container holding the canvas, apply border-radius and overflow: hidden;
3. Implement an element below the canvas to display the scratch percentage
4. Scratch the area until there is nothing left to scratch.

You will notice that the percentage will not match what was scratched while scratching.