-
diff --git a/main.js b/main.js
index f620d8b..95c0558 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,34 @@
-document.addEventListener("DOMContentLoaded", main)
+let canvas, imports;
-function main() {
+// wait for site to be parsed so element can be found
+document.addEventListener("DOMContentLoaded", function () {
+ // bind listeners
+ document.getElementById("take-picture").addEventListener("click", take_picture);
+ document.getElementById("upload-image").addEventListener("change", upload_image)
+
+ canvas = document.getElementById("myCanvas");
+ imports = document.getElementById("imports");
+})
+
+function take_picture() {
+ canvas.classList.remove("is-hidden");
+ imports.classList.add("is-hidden");
+
+}
+
+function upload_image(event) {
+ canvas.classList.remove("is-hidden");
+ imports.classList.add("is-hidden");
+ console.log(this.files[0]);
+
+ const img = new Image();
+ const ctx = canvas.getContext("2d");
+ img.src = URL.createObjectURL(this.files[0]);
+ img.onload = function() {
+ canvas.width = img.naturalWidth;
+ canvas.height = img.naturalHeight;
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+ }
+}
-}
\ No newline at end of file
diff --git a/style.css b/style.css
index d709d30..11f3fc9 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,8 @@ html, body {
margin: 0px;
scroll-behavior: smooth;
}
+
+canvas {
+ max-width: 100%;
+ max-height: 100%;
+}