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:
Implement the ScratchCard
In the container holding the canvas, apply border-radius and overflow: hidden;
Implement an element below the canvas to display the scratch percentage
Scratch the area until there is nothing left to scratch.
You will notice that the percentage will not match what was scratched while scratching.
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:
You will notice that the percentage will not match what was scratched while scratching.