# scratchcard-js

> Create scratch card in browser.

Latest version **1.5.5** (published 2023-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install scratchcard-js
pnpm add scratchcard-js
yarn add scratchcard-js
bun add scratchcard-js
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.5 |
| Published | 2023-10-10 |
| First published | 2017-12-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 147.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 174 |
| Author | Masth0 |
| Maintainers | masth0 |
| Keywords | canvas, javascript, scratchcard, scratch card |

## Links

- npm: https://www.npmjs.com/package/scratchcard-js
- Repository: https://github.com/Masth0/ScratchCard
- Homepage: https://github.com/Masth0/ScratchCard#readme
- Issues: https://github.com/Masth0/ScratchCard/issues
- npm.io page: https://npm.io/package/scratchcard-js

## Dependencies (2)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.1.2
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 1.5.5 (latest) — 2023-10-10
- 1.5.4 — 2023-08-18
- 1.5.3 — 2023-08-18
- 1.5.2 — 2023-08-18
- 1.5.1 — 2023-08-18
- 1.5.0 — 2023-07-12
- 1.4.10 — 2021-02-06
- 1.4.9 — 2020-06-18
- 1.4.8 — 2020-06-12
- 1.4.7 — 2018-10-07
- 1.4.6 — 2018-08-26
- 1.4.5 — 2018-07-02
- 1.4.4 — 2018-06-30
- 1.4.3 — 2018-06-30
- 1.3.4 — 2018-04-17
- … 17 more at https://npm.io/package/scratchcard-js/versions

## README

# Scratchcard-js 
![Build](https://travis-ci.org/Masth0/ScratchCard.svg?branch=v2)
![version](https://img.shields.io/npm/v/scratchcard-js.svg)

ScratchCard is a js lib to simulate a scratchcard in browser with html5 and canvas.

You can see the [**demo page**](https://masth0.github.io/ScratchCard/).

## Install
You can install ScratchCard with npm:
```
npm install --save scratchcard-js
```
or just clone this repo:
```
git clone https://github.com/Masth0/ScratchCard.git
```
and pick in the folder **./build** the file **scratchard.min.js**

## Getting started

```js
import {ScratchCard, SCRATCH_TYPE} from 'scratchcard-js'

const scContainer = document.getElementById('js--sc--container')

// You also can pass HTML Element or a string for querySelector
// new ScratchCard(htmlElement...

const sc = new ScratchCard('#js--sc--container', {
  scratchType: SCRATCH_TYPE.SPRAY,
  containerWidth: scContainer.offsetWidth,
  containerHeight: 300,
  imageForwardSrc: '/images/scratchcard.jpg',
  imageBackgroundSrc: '/images/result.png',
  htmlBackground: '<p class="test"><strong>Hello i am HTML content !</strong></p>',
  clearZoneRadius: 50,
  nPoints: 30,
  pointSize: 4,
  callback: function () {
    alert('Now the window will reload !')
    window.location.reload()
  }
})

// Init
sc.init().then(() => {
  sc.canvas.addEventListener('scratch.move', () => {
    let percent = sc.getPercent().toFixed(2)
    console.log(percent)
  })
}).catch((error) => {
  // image not loaded
  alert(error.message);
});
```

## Events
**'scratch.move'**
```js
sc.canvas.addEventListener('scratch.move', function() {
  let percent = sc.getPercent();
  console.log(percent);
});
```

---
_Source: https://npm.io/package/scratchcard-js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._