bug?added

Author: DarkcoderSe

src/App.js

@@ -8,6 +8,17 @@ import Tools from './components/Tools';
 
 class App extends Component {
 
+  clearBoard = () => {
+    console.log("Clear Board");
+    const context = document.getElementById('canvas').getContext('2d');
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+    paint = false;
+    clickX = [];
+    clickY = [];
+    clickDrag = [];
+
+  }
+
   render() {
     return (
       <div>
@@ -21,7 +32,7 @@ class App extends Component {
         <Container>
           <Row>
             <Col className="justify-content-center">
-              <Tools />
+              <Tools clearBoard={this.clearBoard} />
             </Col>
           </Row>
         </Container>

src/components/Tools.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Button} from 'react-bootstrap'
 
-function Tools() {
+function Tools(props) {
     return (
         <div className="text-center">
             <Button variant="success btn-sm" data-target="tooltip" title="Save Paint">Save</Button> {' '}
@@ -21,7 +21,7 @@ function Tools() {
                 <ion-icon name="logo-facebook"></ion-icon>
             </Button> {' '}
 
-            <Button variant="danger btn-sm" data-target="tooltip" title="Clear the Paint board">Clear</Button>
+            <Button variant="danger btn-sm" data-target="tooltip" onClick={props.clearBoard} title="Clear the Paint board">Clear</Button>
         </div>
     )
 }