changes in pr

Author: Code-Crash

README.md

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

demo/src/index.js

@@ -26,7 +26,7 @@ class Demo extends Component {
       });
     }, 2000);
 
-    // let's change the background image every 15 seconds. fun!
+    // let's change the background image every 2 seconds. fun!
     window.setInterval(() => {
       if (
         this.state.imgs &&
@@ -99,11 +99,9 @@ class Demo extends Component {
         />
 
         <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>

src/index.js

@@ -60,8 +60,7 @@ export default class extends PureComponent {
     imgSrc: PropTypes.string,
     saveData: PropTypes.string,
     immediateLoading: PropTypes.bool,
-    hideInterface: PropTypes.bool,
-    refreshBackgroundImage: PropTypes.bool,
+    hideInterface: PropTypes.bool
   };
 
   static defaultProps = {
@@ -80,8 +79,7 @@ export default class extends PureComponent {
     imgSrc: "",
     saveData: "",
     immediateLoading: false,
-    hideInterface: false,
-    refreshBackgroundImage: false
+    hideInterface: false
   };
 
   constructor(props) {
@@ -158,9 +156,8 @@ export default class extends PureComponent {
       this.valuesChanged = true;
     }
 
-    // Refresh the Background Canvas if refreshBackgroundImage is true
-    if (this.props.refreshBackgroundImage) {
-        this.drawImage();
+    if (prevProps.imgSrc !== this.props.imgSrc) {
+      this.drawImage();
     }
 
   }
@@ -174,11 +171,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 = () => {
@@ -329,6 +326,7 @@ 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);