diff --git a/ui/src/App.js b/ui/src/App.js
index ede764a..aa34fc1 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -14,10 +14,12 @@ class App extends React.Component {
             operations: [],
             isLmbPressed: false
         };
-        this.onMouseLeaveDrawingArea = this.onMouseLeaveDrawingArea.bind(this);
         this.onDrawingAreaMouseDown = this.onDrawingAreaMouseDown.bind(this);
         this.onDrawingAreaMouseUp = this.onDrawingAreaMouseUp.bind(this);
         this.onDrawingAreaMouseMove = this.onDrawingAreaMouseMove.bind(this);
+
+        this.onMouseLeaveDrawingArea = this.onMouseLeaveDrawingArea.bind(this);
+        this.onMouseEnterDrawingArea = this.onMouseEnterDrawingArea.bind(this);
     }
 
     onDrawingAreaMouseDown(x, y, button) {
@@ -42,10 +44,16 @@ class App extends React.Component {
         });
     }
 
-    onMouseLeaveDrawingArea() {
+    onMouseLeaveDrawingArea(x, y) {
         this.setState({isLmbPressed: false}) // Always false for now
     }
 
+    onMouseEnterDrawingArea(x, y, button, buttons) {
+        if (buttons != 0) {
+            this.onDrawingAreaMouseDown(x, y, button)
+        }
+    }
+
     onDrawingAreaMouseMove(dx, dy, newX, newY) {
         this.setState(state => {
             if (state.isLmbPressed) {
@@ -59,14 +67,14 @@ class App extends React.Component {
     render() {
         return (
             <div className="App">
-                <div className={'drawing-area-container'}
-                    onMouseLeave={this.onMouseLeaveDrawingArea}
-                >
+                <div className={'drawing-area-container'}>
                     <DrawingArea
                         offset={drawingAreaOffset}
                         onMouseDown={this.onDrawingAreaMouseDown}
                         onMouseUp={this.onDrawingAreaMouseUp}
                         onMouseMove={this.onDrawingAreaMouseMove}
+                        onMouseLeave={this.onMouseLeaveDrawingArea}
+                        onMouseEnter={this.onMouseEnterDrawingArea}
                         operations={this.state.operations}
                     />
                 </div>
diff --git a/ui/src/components/DrawingArea.js b/ui/src/components/DrawingArea.js
index 2f0da9a..bc228a8 100644
--- a/ui/src/components/DrawingArea.js
+++ b/ui/src/components/DrawingArea.js
@@ -8,6 +8,8 @@ class DrawingArea extends React.Component {
         this.handleMouseDown = this.handleMouseDown.bind(this);
         this.handleMouseUp = this.handleMouseUp.bind(this);
         this.handleMouseMove = this.handleMouseMove.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleMouseEnter = this.handleMouseEnter.bind(this);
     }
 
     componentDidMount() {
@@ -58,6 +60,20 @@ class DrawingArea extends React.Component {
         }
     }
 
+    handleMouseLeave(e) {
+        if (this.props.onMouseLeave) {
+            const {worldX, worldY} = this.toWorldCoord(e.clientX, e.clientY);
+            this.props.onMouseLeave(worldX, worldY);
+        }
+    }
+
+    handleMouseEnter(e) {
+        if (this.props.onMouseEnter) {
+            const {worldX, worldY} = this.toWorldCoord(e.clientX, e.clientY);
+            this.props.onMouseEnter(worldX, worldY, e.button, e.buttons);
+        }
+    }
+
     render() {
         return <div className="drawing-area-canvas">
             <canvas
@@ -65,6 +81,8 @@ class DrawingArea extends React.Component {
                 onMouseDown={this.handleMouseDown}
                 onMouseUp={this.handleMouseUp}
                 onMouseMove={this.handleMouseMove}
+                onMouseLeave={this.handleMouseLeave}
+                onMouseEnter={this.handleMouseEnter}
                 style={{width: '100%', height: '100%'}}
             />
         </div>;