a day ago
- The original scratch-off effect used a single global object and variables tied to one canvas, causing conflicts with multiple canvases.
- To support multiple canvases, refactor into a class-like `Scratcher` constructor that holds per-canvas data (images, canvas ID, mouse state) and is instantiated separately for each canvas.
- Convert functions to methods on the `Scratcher` prototype, replacing references to global DOM elements with `this.canvasId`.
- Address the issue of `this` inside event handlers by using `bind()`, closures, or jQuery's event data to keep the correct `Scratcher` reference.
- Add an image-loading callback to know when each scratcher is ready, and optionally include a `fullAmount()` method to compute scratched percentage and a custom event system (e.g., 'scratch', 'reset').