scratchable is a scratch card renderer using HTML Canvas. It renders a scratchable canvas element on your content, and provides percentage of scratched pixels.

First of all, you should pass container to Scratchable, which will be overlapped by a scratchable canvas.

const container = document.getElementById("container");

const scratchable = new Scratchable({
  container,
  /* ... */
});

<div id="container">/* CONTENT */</div>

Or in React,

const container = ref.current;

const scratchable = new Scratchable({
  container,
  /* ... */
});

<div ref={ref}>{/* CONTENT */}</div>

And then it will render the canvas on your /* CONTENT */, when you call Scratchable.render(). It returns Promise<void>.

await scratchable.render();

And you can also remove the rendered canvas.

scratchable.destroy();

This is the basic. Now let's see another required option background.

You should pass background to Scratchable, which is the color of the rendered canvas.

It has three kinds of type, single, linear-gradient and image.

new Scratchable({
  /* ... */
  background: {
    type: "single",
    color: "#FA58D0",
  },
});

new Scratchable({
  /* ... */
  background: {
    type: "linear-gradient",
    gradients: [
      { offset: 0, color: "#FA58D0" },
      { offset: 0.5, color: "#DA81F5" },
      { offset: 1, color: "#BE81F7" },
    ],
  },
});

new Scratchable({
  /* ... */
  background: {
    type: "image",
    url: "karina.jpeg",
  },
});

You can set radius of a circle which is rendered when you scratch the canvas. Let's compare between 20 and 40.

new Scratchable({
  /* ... */
  radius: 20,
});

new Scratchable({
  /* ... */
  radius: 40,
});

You can register a function which will be called when scratch event fires. The event fires when an user is scratching the canvas.

const handler = (e: ScratchableEvent) => {
  /* ... */
};

scratchable.addEventListener("scratch", handler);
scratchable.removeEventListener("scratch", handler);

You can get percentage(0 ~ 1) from ScratchEvent above. The percentage is ratio of scratched area to all scratchable area.

const handler = (e: ScratchableEvent) => {
  if (e.percentage > 0.5) {
    scratchable.destroy();
  }
};

scratchable.addEventListener("scratch", handler);