Added a support for refresh the background image

Author: Code-Crash

.gitignore

@@ -5,3 +5,4 @@
 /node_modules
 /umd
 npm-debug.log*
+.vscode/

README.md

@@ -58,7 +58,8 @@ These are the defaultProps of CanvasDraw. You can pass along any of these props
     imgSrc: "",
     saveData: null,
     immediateLoading: false,
-    hideInterface: false
+    hideInterface: false,
+    refreshBackgroundImage: false,
   };
 ```
 

demo/src/index.js

@@ -10,15 +10,43 @@ class Demo extends Component {
     width: 400,
     height: 400,
     brushRadius: 10,
-    lazyRadius: 12
+    lazyRadius: 12,
+    backgroundImg: "https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg",
+    imgs: [
+      "https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg",
+      "https://i.imgur.com/a0CGGVC.jpg"
+    ]
   };
+
   componentDidMount() {
     // let's change the color randomly every 2 seconds. fun!
     window.setInterval(() => {
       this.setState({
         color: "#" + Math.floor(Math.random() * 16777215).toString(16)
       });
     }, 2000);
+
+    // let's change the background image every 15 seconds. fun!
+    window.setInterval(() => {
+      if (
+        this.state.imgs &&
+        this.state.imgs.length &&
+        this.state.backgroundImg
+      ) {
+        let img = '';
+        let imgs = this.state.imgs;
+        for (let i = 0; i < imgs.length; i++) {
+          if (this.state.backgroundImg !== imgs[i]) {
+            img = imgs[i];
+          }
+        }
+
+        this.setState({
+          backgroundImg: img,
+        });
+      }
+    }, 2000);
+
   }
   render() {
     return (
@@ -69,6 +97,15 @@ class Demo extends Component {
           brushColor="rgba(155,12,60,0.3)"
           imgSrc="https://upload.wikimedia.org/wikipedia/commons/a/a1/Nepalese_Mhapuja_Mandala.jpg"
         />
+
+        <h2>Refreshable Background Image</h2>
+        <p>You can also set the `refreshBackgroundImage` prop to true is you want to enable background refreshable.</p>
+        <p>This will refresh the background in every two seconds.</p>
+        <CanvasDraw
+          brushColor="rgba(155,12,60,0.3)"
+          refreshBackgroundImage={true}
+          imgSrc={this.state.backgroundImg}
+        />
         <h2>Hide UI</h2>
         <p>To hide the UI elements, set the `hideInterface` prop. You can also hide the grid with the `hideGrid` prop.</p>
         <CanvasDraw hideInterface hideGrid />

src/index.js

@@ -60,7 +60,8 @@ export default class extends PureComponent {
     imgSrc: PropTypes.string,
     saveData: PropTypes.string,
     immediateLoading: PropTypes.bool,
-    hideInterface: PropTypes.bool
+    hideInterface: PropTypes.bool,
+    refreshBackgroundImage: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -79,7 +80,8 @@ export default class extends PureComponent {
     imgSrc: "",
     saveData: "",
     immediateLoading: false,
-    hideInterface: false
+    hideInterface: false,
+    refreshBackgroundImage: false
   };
 
   constructor(props) {
@@ -155,6 +157,12 @@ export default class extends PureComponent {
       // Signal this.loop function that values changed
       this.valuesChanged = true;
     }
+
+    // Refresh the Background Canvas if refreshBackgroundImage is true
+    if (this.props.refreshBackgroundImage) {
+        this.drawImage();
+    }
+
   }
 
   componentWillUnmount = () => {
@@ -166,11 +174,11 @@ export default class extends PureComponent {
 
     // Load the image
     this.image = new Image();
+    this.image.src = this.props.imgSrc;
 
     // Draw the image once loaded
     this.image.onload = () =>
       drawImage({ ctx: this.ctx.grid, img: this.image });
-    this.image.src = this.props.imgSrc;
   };
 
   undo = () => {
@@ -321,7 +329,6 @@ export default class extends PureComponent {
       this.setCanvasSize(this.canvas.grid, width, height);
 
       this.drawGrid(this.ctx.grid);
-      this.drawImage();
       this.loop({ once: true });
     }
     this.loadSaveData(saveData, true);