{"id":21832303,"url":"https://github.com/hoseungme/scratchable","last_synced_at":"2025-04-14T07:21:02.965Z","repository":{"id":183180458,"uuid":"669517329","full_name":"hoseungme/scratchable","owner":"hoseungme","description":"Hide your content, scratch to see it.","archived":false,"fork":false,"pushed_at":"2023-08-30T20:50:34.000Z","size":122,"stargazers_count":29,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T21:01:41.935Z","etag":null,"topics":["canvas","scratch-card","ui","web"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hoseungme.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-07-22T14:35:21.000Z","updated_at":"2025-01-24T02:42:39.000Z","dependencies_parsed_at":null,"dependency_job_id":"39bd9203-811b-4b22-acb3-2a5ab39bd960","html_url":"https://github.com/hoseungme/scratchable","commit_stats":null,"previous_names":["hoseungjang/scratchable","hoseungme/scratchable"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fscratchable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fscratchable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fscratchable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hoseungme%2Fscratchable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hoseungme","download_url":"https://codeload.github.com/hoseungme/scratchable/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248837170,"owners_count":21169377,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","scratch-card","ui","web"],"created_at":"2024-11-27T19:19:03.141Z","updated_at":"2025-04-14T07:21:02.936Z","avatar_url":"https://github.com/hoseungme.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scratchable\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/5e3e5e4b-ce97-47b5-877c-d04d8375e843\n\n# Overview\n\n`scratchable` is a scratch card renderer using HTML Canvas. It renders a scratchable canvas element on your content, and provides percentage of scratched pixels.\n\n# Usage\n\nFirst of all, you should pass `container` to `Scratchable`, which will be overlapped by a scratchable canvas.\n\n```javascript\nconst container = document.getElementById(\"container\");\n\nconst scratchable = new Scratchable({\n  container,\n  /* ... */\n});\n```\n\n```html\n\u003cdiv id=\"container\"\u003e/* CONTENT */\u003c/div\u003e\n```\n\nOr in React,\n\n```typescript\nconst container = ref.current;\n\nconst scratchable = new Scratchable({\n  container,\n  /* ... */\n});\n```\n\n```tsx\n\u003cdiv ref={ref}\u003e{/* CONTENT */}\u003c/div\u003e\n```\n\nAnd then it will render the canvas on your `/* CONTENT */`, when you call `Scratchable.render()`. It returns `Promise\u003cvoid\u003e`.\n\n```typescript\nawait scratchable.render();\n```\n\nAnd you can also remove the rendered canvas.\n\n```typescript\nscratchable.destroy();\n```\n\nThis is the basic. Now let's see another required option `background`.\n\n## Background\n\nYou should pass `background` to `Scratchable`, which is the color of the rendered canvas.\n\nIt has three kinds of type, `single`, `linear-gradient` and `image`.\n\n### Single Background\n\n```typescript\nnew Scratchable({\n  /* ... */\n  background: {\n    type: \"single\",\n    color: \"#FA58D0\",\n  },\n});\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/7915c2af-8bbe-43d8-9169-631fd7124b91\n\n### Linear Gradient Background\n\n```typescript\nnew Scratchable({\n  /* ... */\n  background: {\n    type: \"linear-gradient\",\n    gradients: [\n      { offset: 0, color: \"#FA58D0\" },\n      { offset: 0.5, color: \"#DA81F5\" },\n      { offset: 1, color: \"#BE81F7\" },\n    ],\n  },\n});\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/bef24ef0-2860-4150-9133-35a922950936\n\n### Image Background\n\n```typescript\nnew Scratchable({\n  /* ... */\n  background: {\n    type: \"image\",\n    url: \"karina.jpeg\",\n  },\n});\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/8fd80f49-bb3c-4582-af82-b57273e6a8c2\n\n## Radius\n\nYou can set radius of a circle which is rendered when you scratch the canvas. Let's compare between 20 and 40.\n\n### 20\n\n```typescript\nnew Scratchable({\n  /* ... */\n  radius: 20,\n});\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/44c38fac-a130-427d-8c8e-874f03e132f1\n\n### 40\n\n```typescript\nnew Scratchable({\n  /* ... */\n  radius: 40,\n});\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/b8421e3b-f79e-4114-a002-0f8c066e1c95\n\n## Scratch Event\n\nYou can register a function which will be called when `scratch` event fires. The event fires when an user is scratching the canvas.\n\n```typescript\nconst handler = (e: ScratchableEvent) =\u003e {\n  /* ... */\n};\n\nscratchable.addEventListener(\"scratch\", handler);\nscratchable.removeEventListener(\"scratch\", handler);\n```\n\n## Scratched Percentage\n\nYou can get percentage(0 ~ 1) from `ScratchEvent` above. The percentage is ratio of scratched area to all scratchable area.\n\n```typescript\nconst handler = (e: ScratchableEvent) =\u003e {\n  if (e.percentage \u003e 0.5) {\n    scratchable.destroy();\n  }\n};\n\nscratchable.addEventListener(\"scratch\", handler);\n```\n\nhttps://github.com/HoseungJang/scratchable/assets/39669819/877e7224-5311-443e-84d1-be24632f5d21\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoseungme%2Fscratchable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhoseungme%2Fscratchable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhoseungme%2Fscratchable/lists"}