diff --git a/src/js/core/base-tools.js b/src/js/core/base-tools.js
index e5e4a25b..4982da2d 100644
--- a/src/js/core/base-tools.js
+++ b/src/js/core/base-tools.js
@@ -29,28 +29,58 @@ class Base_tools_class {
 		}
 	}
 
+	dragStart(event) {
+        var _this = this;
+        _this.set_mouse_info(event);
+
+        _this.is_drag = true;
+        _this.speed_average = 0;
+        var mouse = _this.get_mouse_info(event, true);
+        _this.mouse_click_pos[0] = mouse.x;
+        _this.mouse_click_pos[1] = mouse.y;
+    }
+
+    dragMove(event) {
+        var _this = this;
+        _this.set_mouse_info(event);
+
+        _this.speed_average = _this.calc_average_mouse_speed(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        _this.is_drag = false;
+        _this.set_mouse_info(event);
+    }
+
 	events() {
 		var _this = this;
 
+
+
 		//collect mouse info
 		document.addEventListener('mousedown', function (event) {
-			_this.set_mouse_info(event);
-
-			_this.is_drag = true;
-			_this.speed_average = 0;
-			var mouse = _this.get_mouse_info(event, true);
-			_this.mouse_click_pos[0] = mouse.x;
-			_this.mouse_click_pos[1] = mouse.y;
+            _this.dragStart(event);
 		});
 		document.addEventListener('mousemove', function (event) {
-			_this.set_mouse_info(event);
-
-			_this.speed_average = _this.calc_average_mouse_speed(event);
+            _this.dragMove(event);
 		});
 		document.addEventListener('mouseup', function (event) {
-			_this.is_drag = false;
-			_this.set_mouse_info(event);
+            _this.dragEnd(event);
 		});
+
+		// collect touch info
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+            if(event.target.id === "canvas_minipaint" && !$('.scroll').has($(event.target)).length)
+                event.preventDefault();
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	/**
@@ -71,30 +101,33 @@ class Base_tools_class {
 			//not main
 			return false;
 		}
-		if (event != undefined && event.changedTouches) {
-			//using touch events
-			event = event.changedTouches[0];
-		}
 
-		var mouse_x = event.pageX - this.canvas_offset.x;
-		var mouse_y = event.pageY - this.canvas_offset.y;
+		var eventType = event.type;
 
-		if (event.target.id != "canvas_minipaint") {
-			//outside canvas
-			this.mouse_valid = false;
-		}
-		else {
-			this.mouse_valid = true;
-		}
+        if (event.target.id != "canvas_minipaint") {
+            //outside canvas
+            this.mouse_valid = false;
+        }
+        else {
+            this.mouse_valid = true;
+        }
 
-		if (event.type == 'mousedown') {
-			if (event.target.id != "canvas_minipaint" || event.which != 1)
+		if (eventType === 'mousedown' || eventType === 'touchstart') {
+			if (event.target.id != "canvas_minipaint" || (event.which != 1 && eventType !== 'touchstart'))
 				this.mouse_click_valid = false;
 			else
 				this.mouse_click_valid = true;
 			this.mouse_valid = true;
 		}
 
+        if (event != undefined && event.changedTouches) {
+            //using touch events
+            event = event.changedTouches[0];
+        }
+
+        var mouse_x = event.pageX - this.canvas_offset.x;
+        var mouse_y = event.pageY - this.canvas_offset.y;
+
 		//adapt coords to ZOOM
 		var global_pos = this.Base_layers.get_world_coords(mouse_x, mouse_y);
 		mouse_x = global_pos.x;
@@ -120,7 +153,7 @@ class Base_tools_class {
 			speed_average: this.speed_average,
 		};
 
-		if (event.type == 'mousemove') {
+		if (eventType === 'mousemove' || eventType === 'touchmove') {
 			//save last pos
 			this.mouse_move_last[0] = mouse_x;
 			this.mouse_move_last[1] = mouse_y;
@@ -171,7 +204,7 @@ class Base_tools_class {
 
 	/**
 	 * customized mouse cursor
-	 * 
+	 *
 	 * @param {int} x
 	 * @param {int} y
 	 * @param {int} size
diff --git a/src/js/tools/blur.js b/src/js/tools/blur.js
index 8494e247..81f1171b 100644
--- a/src/js/tools/blur.js
+++ b/src/js/tools/blur.js
@@ -18,31 +18,56 @@ class Blur_class extends Base_tools_class {
 		this.started = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(e);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/brush.js b/src/js/tools/brush.js
index 04a126e8..2e639882 100644
--- a/src/js/tools/brush.js
+++ b/src/js/tools/brush.js
@@ -14,30 +14,56 @@ class Brush_class extends Base_tools_class {
 		this.params_hash = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/bulge_pinch.js b/src/js/tools/bulge_pinch.js
index 204e123f..1407ebde 100644
--- a/src/js/tools/bulge_pinch.js
+++ b/src/js/tools/bulge_pinch.js
@@ -19,30 +19,55 @@ class BulgePinch_class extends Base_tools_class {
 		this.started = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.radius, 'circle');
-
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/circle.js b/src/js/tools/circle.js
index 16e6cbb8..8dd9bea2 100644
--- a/src/js/tools/circle.js
+++ b/src/js/tools/circle.js
@@ -12,25 +12,51 @@ class Circle_class extends Base_tools_class {
 		this.layer = {};
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/clone.js b/src/js/tools/clone.js
index 994ad8f3..7620df7d 100644
--- a/src/js/tools/clone.js
+++ b/src/js/tools/clone.js
@@ -18,34 +18,59 @@ class Clone_class extends Base_tools_class {
 		this.clone_coords = null;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
-		document.addEventListener('contextmenu', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseRightClick(e);
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
+
+		document.addEventListener('contextmenu', function (event) {
+			_this.mouseRightClick(event);
 		});
 	}
 
@@ -64,6 +89,8 @@ class Clone_class extends Base_tools_class {
 	}
 
 	mouseRightClick(e) {
+        if (config.TOOL.name != this.name)
+            return;
 		var mouse = this.get_mouse_info(e);
 		var params = this.getParams();
 
@@ -124,8 +151,8 @@ class Clone_class extends Base_tools_class {
 			alertify.error('Clone tool disabled for resized image. Sorry.');
 			return;
 		}
-		if (params.source_layer.value == 'Previous' && 
-			(previous_layer.width != previous_layer.width_original 
+		if (params.source_layer.value == 'Previous' &&
+			(previous_layer.width != previous_layer.width_original
 			|| previous_layer.height != previous_layer.height_original)) {
 			alertify.error('Clone tool disabled for resized image. Sorry.');
 			return;
diff --git a/src/js/tools/crop.js b/src/js/tools/crop.js
index f29ae615..d1464bbd 100644
--- a/src/js/tools/crop.js
+++ b/src/js/tools/crop.js
@@ -33,25 +33,51 @@ class Crop_class extends Base_tools_class {
 		this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
@@ -170,11 +196,11 @@ class Crop_class extends Base_tools_class {
 			var link = config.layers[i];
 			if (link.type == null)
 				continue;
-			
+
 			//move
 			link.x -= parseInt(selection.x);
 			link.y -= parseInt(selection.y);
-			
+
 			if(link.type == 'image'){
 				//also remove unvisible data
 				var left = 0;
@@ -191,23 +217,23 @@ class Crop_class extends Base_tools_class {
 					bottom = link.y + link.height - selection.height;
 				var width = link.width - left - right;
 				var height = link.height - top - bottom;
-				
+
 				//if image was streched
 				var width_ratio = (link.width / link.width_original);
 				var height_ratio = (link.height / link.height_original);
-				
+
 				//create smaller canvas
 				var canvas = document.createElement('canvas');
 				var ctx = canvas.getContext("2d");
 				canvas.width = width / width_ratio;
 				canvas.height = height / height_ratio;
-				
+
 				//cut required part
 				ctx.translate(-left / width_ratio, -top / height_ratio);
 				canvas.getContext("2d").drawImage(link.link, 0, 0);
 				ctx.translate(0, 0);
 				this.Base_layers.update_layer_image(canvas, link.id);
-				
+
 				//update attributes
 				link.width = Math.ceil(canvas.width * width_ratio);
 				link.height = Math.ceil(canvas.height * height_ratio);
diff --git a/src/js/tools/desaturate.js b/src/js/tools/desaturate.js
index 59636d2f..03df507d 100644
--- a/src/js/tools/desaturate.js
+++ b/src/js/tools/desaturate.js
@@ -18,31 +18,56 @@ class Desaturate_class extends Base_tools_class {
 		this.started = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/erase.js b/src/js/tools/erase.js
index 35bff3e2..3ae53881 100644
--- a/src/js/tools/erase.js
+++ b/src/js/tools/erase.js
@@ -15,34 +15,59 @@ class Erase_class extends Base_tools_class {
 		this.started = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        if (params.circle == true)
+            _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+        else
+            _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
 		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
+		document.addEventListener('mousedown', function (event) {
+			_this.dragStart(event);
 		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			if (params.circle == true)
-				_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-			else
-				_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'rect');
-
+		document.addEventListener('mousemove', function (event) {
+			_this.dragMove(event);
 		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
+		document.addEventListener('mouseup', function (event) {
+			_this.dragEnd(event);
 		});
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	on_params_update() {
diff --git a/src/js/tools/fill.js b/src/js/tools/fill.js
index ea51fe9e..3fbfb9a3 100644
--- a/src/js/tools/fill.js
+++ b/src/js/tools/fill.js
@@ -14,15 +14,25 @@ class Fill_class extends Base_tools_class {
 		this.name = 'fill';
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/gradient.js b/src/js/tools/gradient.js
index 0b2a5839..7042ab87 100644
--- a/src/js/tools/gradient.js
+++ b/src/js/tools/gradient.js
@@ -14,25 +14,51 @@ class Gradient_class extends Base_tools_class {
 		this.layer = {};
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/line.js b/src/js/tools/line.js
index b1e8b6a3..5b4d00d9 100644
--- a/src/js/tools/line.js
+++ b/src/js/tools/line.js
@@ -12,25 +12,51 @@ class Line_class extends Base_tools_class {
 		this.layer = {};
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/magic_wand.js b/src/js/tools/magic_wand.js
index 09364c65..20cae4dc 100644
--- a/src/js/tools/magic_wand.js
+++ b/src/js/tools/magic_wand.js
@@ -12,15 +12,25 @@ class Magic_wand_class extends Base_tools_class {
 		this.name = 'magic_wand';
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
 	}
 
 	mousedown(e) {
@@ -73,7 +83,7 @@ class Magic_wand_class extends Base_tools_class {
 
 	/**
 	 * apply magic wand
-	 * 
+	 *
 	 * @param {ctx} context
 	 * @param {int} W
 	 * @param {int} H
diff --git a/src/js/tools/pencil.js b/src/js/tools/pencil.js
index 0674fa53..c6633f0b 100644
--- a/src/js/tools/pencil.js
+++ b/src/js/tools/pencil.js
@@ -14,31 +14,57 @@ class Pencil_class extends Base_tools_class {
 		this.params_hash = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        if (params.antialiasing == true)
+            _this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			if (params.antialiasing == true)
-				_this.show_mouse_cursor(mouse.x, mouse.y, params.size || 1, 'circle');
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
@@ -131,7 +157,7 @@ class Pencil_class extends Base_tools_class {
 
 	/**
 	 * draw without antialiasing, sharp, ugly mode.
-	 * 
+	 *
 	 * @param {ctx} ctx
 	 * @param {object} layer
 	 */
@@ -181,7 +207,7 @@ class Pencil_class extends Base_tools_class {
 
 	/**
 	 * draws line without aliasing
-	 * 
+	 *
 	 * @param {ctx} ctx
 	 * @param {int} from_x
 	 * @param {int} from_y
@@ -203,7 +229,7 @@ class Pencil_class extends Base_tools_class {
 
 	/**
 	 * draw with antialiasing, nice mode
-	 * 
+	 *
 	 * @param {ctx} ctx
 	 * @param {object} layer
 	 */
diff --git a/src/js/tools/pick_color.js b/src/js/tools/pick_color.js
index 5bd843f6..fa9a676d 100644
--- a/src/js/tools/pick_color.js
+++ b/src/js/tools/pick_color.js
@@ -15,20 +15,38 @@ class Pick_color_class extends Base_tools_class {
 		this.name = 'pick_color';
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/rectangle.js b/src/js/tools/rectangle.js
index 0cd6dec1..5d65f9bd 100644
--- a/src/js/tools/rectangle.js
+++ b/src/js/tools/rectangle.js
@@ -12,25 +12,51 @@ class Rectangle_class extends Base_tools_class {
 		this.layer = {};
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/select.js b/src/js/tools/select.js
index a7575bd9..c8b763c4 100644
--- a/src/js/tools/select.js
+++ b/src/js/tools/select.js
@@ -26,20 +26,38 @@ class Select_tool_class extends Base_tools_class {
 		this.Base_selection = new Base_selection_class(ctx, sel_config, this.name);
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
 
 		//keyboard actions
 		document.addEventListener('keydown', function (e) {
@@ -83,10 +101,10 @@ class Select_tool_class extends Base_tools_class {
 			return;
 		if (this.Base_selection.mouse_lock != null)
 			return;
-		
+
 		this.auto_select_object(e);
 		this.saved = false;
-		
+
 		this.last_post = {
 			x: config.layer.x,
 			y: config.layer.y,
@@ -111,7 +129,7 @@ class Select_tool_class extends Base_tools_class {
 		//move object
 		config.layer.x = Math.round(mouse.x - mouse.click_x + this.last_post.x);
 		config.layer.y = Math.round(mouse.y - mouse.click_y + this.last_post.y);
-		
+
 		this.Base_layers.render();
 	}
 
diff --git a/src/js/tools/selection.js b/src/js/tools/selection.js
index 7717b0f5..7c5cf8ef 100644
--- a/src/js/tools/selection.js
+++ b/src/js/tools/selection.js
@@ -46,25 +46,52 @@ class Selection_class extends Base_tools_class {
 		this.GUI_tools = new GUI_tools_class();
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
+
 		document.addEventListener('keydown', function (e) {
 			var code = e.keyCode;
 			if (e.target.type == 'text' || e.target.tagName == 'INPUT' || e.target.type == 'textarea')
@@ -266,10 +293,10 @@ class Selection_class extends Base_tools_class {
 		}
 
 		this.init_tmp_canvas();
-		
+
 		var mouse_x = selection.x - layer.x;
 		var mouse_y = selection.y - layer.y;
-		
+
 		//adapt to origin size
 		mouse_x = this.adaptSize(mouse_x, 'width');
 		mouse_y = this.adaptSize(mouse_y, 'height');
diff --git a/src/js/tools/sharpen.js b/src/js/tools/sharpen.js
index 7824c5a7..dfbbf854 100644
--- a/src/js/tools/sharpen.js
+++ b/src/js/tools/sharpen.js
@@ -18,31 +18,56 @@ class Sharpen_class extends Base_tools_class {
 		this.started = false;
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+
+        //mouse cursor
+        var mouse = _this.get_mouse_info(event);
+        var params = _this.getParams();
+        _this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//mouse events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-
-			//mouse cursor
-			var mouse = _this.get_mouse_info(e);
-			var params = _this.getParams();
-			_this.show_mouse_cursor(mouse.x, mouse.y, params.size, 'circle');
-
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
diff --git a/src/js/tools/text.js b/src/js/tools/text.js
index 87d52b71..093ee23d 100644
--- a/src/js/tools/text.js
+++ b/src/js/tools/text.js
@@ -16,25 +16,51 @@ class Text_class extends Base_tools_class {
 		this.layer = {};
 	}
 
+    dragStart(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousedown(event);
+    }
+
+    dragMove(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mousemove(event);
+    }
+
+    dragEnd(event) {
+        var _this = this;
+        if (config.TOOL.name != _this.name)
+            return;
+        _this.mouseup(event);
+    }
+
 	load() {
 		var _this = this;
 
-		//events
-		document.addEventListener('mousedown', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousedown(e);
-		});
-		document.addEventListener('mousemove', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mousemove(e);
-		});
-		document.addEventListener('mouseup', function (e) {
-			if (config.TOOL.name != _this.name)
-				return;
-			_this.mouseup(e);
-		});
+        //mouse events
+        document.addEventListener('mousedown', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('mousemove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('mouseup', function (event) {
+            _this.dragEnd(event);
+        });
+
+        // collect touch events
+        document.addEventListener('touchstart', function (event) {
+            _this.dragStart(event);
+        });
+        document.addEventListener('touchmove', function (event) {
+            _this.dragMove(event);
+        });
+        document.addEventListener('touchend', function (event) {
+            _this.dragEnd(event);
+        });
 	}
 
 	mousedown(e) {
@@ -94,7 +120,7 @@ class Text_class extends Base_tools_class {
 		config.layer.width = width;
 		config.layer.height = height;
 		this.Base_layers.render();
-		
+
 		//ask for text
 		var settings = {
 			title: 'Edit text',
@@ -108,7 +134,7 @@ class Text_class extends Base_tools_class {
 				}
 			},
 		};
-		this.POP.show(settings);			
+		this.POP.show(settings);
 	}
 
 	render(ctx, layer) {