feat(reset): add the capability to reset the scratch image, using com…

…ponentRef.reset()

README.md

@@ -33,14 +33,22 @@ yarn add react-scratchcard-v2
 ## Usage
 
 ```tsx
-import React from 'react';
+import React, { useRef }  from 'react';
 import ScratchCard from 'react-scratchcard-v2';
 
 import * as IMG from './img.jpg';
 
 const App = () => {
+
+  const ref = useRef<ScratchCard>(null);
+
+  const onClickReset = () => {
+    ref.current && ref.current.reset();
+  }
+
   return (
     <div>
+      <button onClick={onClickReset}>Reset</button>
       <ScratchCard
         width={320}
         height={226}
@@ -127,7 +135,6 @@ const App = () => {
 | customBrush       | ?CustomBrush    |             |
 | customCheckZone   | ?CustomCheckZone|             |
 
-
 ### CustomBrush
 
 | **name** | **type**       |

example/src/App.tsx

@@ -1,12 +1,20 @@
-import React from 'react'
+import React, { useRef } from 'react'
 import ScratchCard, { CUSTOM_BRUSH_PRESET } from 'react-scratchcard-v2'
 
 import * as IMG from './img.jpg'
 
 const App = () => {
+  const ref = useRef<ScratchCard>(null);
+
+  const onClickReset = () => {
+    ref.current && ref.current.reset();
+  }
+
   return (
     <div>
+      <button onClick={onClickReset}>Reset</button>
       <ScratchCard
+        ref={ref}
         width={320}
         height={226}
         image={IMG}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-scratchcard-v2",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "A scratchcard component for React",
   "author": "dopey2",
   "license": "MIT",

src/index.tsx

@@ -41,12 +41,14 @@ class Scratch extends Component<Props, State> {
 
   lastPoint: Point | null = null
 
-  ctx?: any
+  ctx: CanvasRenderingContext2D;
 
   canvas!: HTMLCanvasElement
 
   brushImage?: any
 
+  image: HTMLImageElement
+
   constructor(props: Props) {
     super(props);
     this.state = { loaded: false, finished: false };
@@ -55,16 +57,16 @@ class Scratch extends Component<Props, State> {
   componentDidMount() {
     this.isDrawing = false;
     this.lastPoint = null;
-    this.ctx = this.canvas.getContext('2d');
+    this.ctx = this.canvas.getContext('2d') as CanvasRenderingContext2D;
 
-    const image = new Image();
-    image.crossOrigin = 'Anonymous';
-    image.onload = () => {
-      this.ctx.drawImage(image, 0, 0, this.props.width, this.props.height);
+    this.image = new Image();
+    this.image.crossOrigin = 'Anonymous';
+    this.image.onload = () => {
+      this.ctx.drawImage(this.image, 0, 0, this.props.width, this.props.height);
       this.setState({ loaded: true });
     };
 
-    image.src = this.props.image;
+    this.image.src = this.props.image;
 
     if (this.props.customBrush) {
       this.brushImage = new Image(
@@ -75,6 +77,12 @@ class Scratch extends Component<Props, State> {
     }
   }
 
+  reset = () => {
+    this.canvas.style.opacity = '1';
+    this.ctx.globalCompositeOperation = 'source-over';
+    this.ctx.drawImage(this.image, 0, 0, this.props.width, this.props.height);
+  }
+
   getFilledInPixels(stride: number) {
     if (!stride || stride < 1) {
       stride = 1;
@@ -103,6 +111,7 @@ class Scratch extends Component<Props, State> {
     let count = 0;
 
     for (let i = 0; i < pixels.data.length; i += stride) {
+      // @ts-ignore
       if (parseInt(pixels.data[i], 10) === 0) {
         count++;
       }