scratchable

2023-07-23.6.54.58.mov

Overview

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

Usage

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.

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.

Single Background

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

2023-07-23.9.15.39.mov

Linear Gradient Background

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

2023-07-23.9.16.48.mov

Image Background

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

2023-07-23.10.16.20.mov

Radius

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

20

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

2023-07-23.9.20.28.mov

40

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

2023-07-23.9.21.00.mov

Scratch Event

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);

Scratched Percentage

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);

2023-07-23.9.40.51.mov