From 30e6e944d2f11964610675c043faefa06c17038d Mon Sep 17 00:00:00 2001
From: jreichmann <johanna.reichmann@delta-industries.de>
Date: Mon, 17 Jun 2019 21:29:28 +0200
Subject: [PATCH] Enable upload of file onto canvas

---
 index.html |  2 +-
 main.js    | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 2de811f..77c63af 100644
--- a/index.html
+++ b/index.html
@@ -12,7 +12,7 @@
 
 		<canvas id="drawImage"></canvas>
 		<label> Color: <input type="color" id="drawColor" /></label>
-
+		<input type="file" id="fileInput"/>
 	</body>
 
 </html>
diff --git a/main.js b/main.js
index 0c1ce9d..821f338 100644
--- a/main.js
+++ b/main.js
@@ -31,5 +31,17 @@ window.onload = () => {
 	})
 
 	document.addEventListener('mouseup', () => {drawing = false})
+
+	const fileInput = document.querySelector("#fileInput")
+	fileInput.addEventListener("change", () => {
+		const file = fileInput.files[0]
+		const reader = new FileReader()
+		reader.onload = () => {
+			const img = new Image(drawAreaBounding.width, drawAreaBounding.height)
+			img.onload = () => drawCtx.drawImage(img, 0, 0)
+			img.src = reader.result
+		}
+		setTimeout(() => reader.readAsDataURL(file), 0)
+	})
 }