Create draw module. Add Paperjs

dist/index.html

@@ -121,6 +121,13 @@
         <button type="button">Previous</button>
         <button type="button">Next</button>
       </div>
+      <div id="canvas-drawing" class="content page page-4">
+        <h2>canvas</h2>
+        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, numquam necessitatibus, iusto at eum non, voluptatum accusantium fugiat aut sapiente recusandae tenetur amet! Quod itaque eaque illo nemo temporibus perferendis!</p>
+        <canvas id="canvas-area"></canvas>
+        <button type="button" class="btn btn-primary">Previous</button>
+        <button type="button" class="btn btn-primary">Next</button>
+      </div>
     </div>
     <footer class="text-center text-small">
       <p class="mb-1">&copy; Legal stuff if needed keke</p>

dist/styles.css

@@ -15,4 +15,10 @@
 
 #personal-information-form label[for="long-time-resident"] {
   color: black;
+}
+
+canvas#canvas-area {
+  width: 100%;
+  height: 100%;
+  background-color: #c0c0c0;
 }

package-lock.json

@@ -435,6 +435,14 @@
       "integrity": "sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==",
       "dev": true
     },
+    "affine-hull": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/affine-hull/-/affine-hull-1.0.0.tgz",
+      "integrity": "sha1-dj/x040GPOt+Jy8X7k17vK+QXF0=",
+      "requires": {
+        "robust-orientation": "^1.1.3"
+      }
+    },
     "ajv": {
       "version": "6.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.0.tgz",
@@ -726,6 +734,11 @@
         "file-uri-to-path": "1.0.0"
       }
     },
+    "bit-twiddle": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/bit-twiddle/-/bit-twiddle-1.0.2.tgz",
+      "integrity": "sha1-DGwfq+KyPRcXPZpht7cJPrnhdp4="
+    },
     "bluebird": {
       "version": "3.7.2",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@@ -1246,6 +1259,16 @@
       "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
       "dev": true
     },
+    "convex-hull": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/convex-hull/-/convex-hull-1.0.3.tgz",
+      "integrity": "sha1-IKOqbOh/St6i/30XlxyfwcZ+H/8=",
+      "requires": {
+        "affine-hull": "^1.0.0",
+        "incremental-convex-hull": "^1.0.1",
+        "monotone-convex-hull-2d": "^1.0.1"
+      }
+    },
     "cookie": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
@@ -2909,6 +2932,14 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "geojson-area": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-area/-/geojson-area-0.2.1.tgz",
+      "integrity": "sha1-JTewmC24YwnyHSxCikJXx6YoLMY=",
+      "requires": {
+        "wgs84": "0.0.0"
+      }
+    },
     "geojson-flatten": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/geojson-flatten/-/geojson-flatten-0.2.4.tgz",
@@ -2925,6 +2956,16 @@
         }
       }
     },
+    "geojson-normalize": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/geojson-normalize/-/geojson-normalize-0.0.0.tgz",
+      "integrity": "sha1-Lbw2eM0bMbgXnodr2nDNEg3eNcA="
+    },
+    "geojson-random": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/geojson-random/-/geojson-random-0.2.2.tgz",
+      "integrity": "sha1-q0g48SatxeFvj5TmVd74IPkRnbw="
+    },
     "geojson-vt": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
@@ -3413,6 +3454,15 @@
       "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
       "dev": true
     },
+    "incremental-convex-hull": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/incremental-convex-hull/-/incremental-convex-hull-1.0.1.tgz",
+      "integrity": "sha1-UUKMFMudmmFEv+abKFH7N3M0vh4=",
+      "requires": {
+        "robust-orientation": "^1.1.2",
+        "simplicial-complex": "^1.0.0"
+      }
+    },
     "indexes-of": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
@@ -3750,6 +3800,11 @@
         "nomnom": ">= 1.5.x"
       }
     },
+    "jsts": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/jsts/-/jsts-1.1.2.tgz",
+      "integrity": "sha1-0gXSzIOTCB2eSErjYoIRBpXtwjA="
+    },
     "kdbush": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
@@ -4107,6 +4162,14 @@
         "minimist": "^1.2.5"
       }
     },
+    "monotone-convex-hull-2d": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/monotone-convex-hull-2d/-/monotone-convex-hull-2d-1.0.1.tgz",
+      "integrity": "sha1-R/Xa6t88Sv03dkuqGqh4ekDu4Iw=",
+      "requires": {
+        "robust-orientation": "^1.1.3"
+      }
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -4530,6 +4593,11 @@
       "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
       "dev": true
     },
+    "paper": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/paper/-/paper-0.12.4.tgz",
+      "integrity": "sha512-KypUqX2uXJZOX2j55RcgnBzK7weau9WKVCB+3e0E1Wa9yxlV7z6BsSrrJxmLNIC0pATbjcy9pJYDutQ7rIhnpQ=="
+    },
     "parallel-transform": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.2.0.tgz",
@@ -5178,6 +5246,36 @@
         "inherits": "^2.0.1"
       }
     },
+    "robust-orientation": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/robust-orientation/-/robust-orientation-1.1.3.tgz",
+      "integrity": "sha1-2v9bANO+TmByLw6cAVbvln8cIEk=",
+      "requires": {
+        "robust-scale": "^1.0.2",
+        "robust-subtract": "^1.0.0",
+        "robust-sum": "^1.0.0",
+        "two-product": "^1.0.2"
+      }
+    },
+    "robust-scale": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/robust-scale/-/robust-scale-1.0.2.tgz",
+      "integrity": "sha1-d1Ey7QlULQKOWLLMecBikLz3jDI=",
+      "requires": {
+        "two-product": "^1.0.2",
+        "two-sum": "^1.0.0"
+      }
+    },
+    "robust-subtract": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/robust-subtract/-/robust-subtract-1.0.0.tgz",
+      "integrity": "sha1-4LFk4e2LpOOl3aRaEgODSNvtPpo="
+    },
+    "robust-sum": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/robust-sum/-/robust-sum-1.0.0.tgz",
+      "integrity": "sha1-FmRuUlKStNJdgnV6KGlV4Lv6U9k="
+    },
     "run-queue": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@@ -5421,6 +5519,20 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
       "dev": true
     },
+    "simplicial-complex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/simplicial-complex/-/simplicial-complex-1.0.0.tgz",
+      "integrity": "sha1-bDOk7Wn81Nkbe8rdOzC2NoPq4kE=",
+      "requires": {
+        "bit-twiddle": "^1.0.0",
+        "union-find": "^1.0.0"
+      }
+    },
+    "simplify-js": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/simplify-js/-/simplify-js-1.2.4.tgz",
+      "integrity": "sha512-vITfSlwt7h/oyrU42R83mtzFpwYk3+mkH9bOHqq/Qw6n8rtR7aE3NZQ5fbcyCUVVmuMJR6ynsAhOfK2qoah8Jg=="
+    },
     "snapdragon": {
       "version": "0.8.2",
       "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz",
@@ -6044,6 +6156,496 @@
       "integrity": "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=",
       "dev": true
     },
+    "turf": {
+      "version": "3.0.14",
+      "resolved": "https://registry.npmjs.org/turf/-/turf-3.0.14.tgz",
+      "integrity": "sha1-6y9KgKLVg7jGSGvHtccZBGaGbCc=",
+      "requires": {
+        "turf-along": "^3.0.12",
+        "turf-area": "^3.0.12",
+        "turf-bbox": "^3.0.12",
+        "turf-bbox-polygon": "^3.0.12",
+        "turf-bearing": "^3.0.12",
+        "turf-bezier": "^3.0.12",
+        "turf-buffer": "^3.0.12",
+        "turf-center": "^3.0.12",
+        "turf-centroid": "^3.0.12",
+        "turf-circle": "^3.0.12",
+        "turf-collect": "^3.0.12",
+        "turf-combine": "^3.0.12",
+        "turf-concave": "^3.0.12",
+        "turf-convex": "^3.0.12",
+        "turf-destination": "^3.0.12",
+        "turf-difference": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-envelope": "^3.0.12",
+        "turf-explode": "^3.0.12",
+        "turf-flip": "^3.0.12",
+        "turf-helpers": "^3.0.12",
+        "turf-hex-grid": "^3.0.12",
+        "turf-inside": "^3.0.12",
+        "turf-intersect": "^3.0.12",
+        "turf-isolines": "^3.0.12",
+        "turf-kinks": "^3.0.12",
+        "turf-line-distance": "^3.0.12",
+        "turf-line-slice": "^3.0.12",
+        "turf-meta": "^3.0.12",
+        "turf-midpoint": "^3.0.12",
+        "turf-nearest": "^3.0.12",
+        "turf-planepoint": "^3.0.12",
+        "turf-point-grid": "^3.0.12",
+        "turf-point-on-line": "^3.0.12",
+        "turf-point-on-surface": "^3.0.12",
+        "turf-random": "^3.0.12",
+        "turf-sample": "^3.0.12",
+        "turf-simplify": "^3.0.12",
+        "turf-square": "^3.0.12",
+        "turf-square-grid": "^3.0.12",
+        "turf-tag": "^3.0.12",
+        "turf-tesselate": "^3.0.12",
+        "turf-tin": "^3.0.12",
+        "turf-triangle-grid": "^3.0.12",
+        "turf-union": "^3.0.12",
+        "turf-within": "^3.0.12"
+      }
+    },
+    "turf-along": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-along/-/turf-along-3.0.12.tgz",
+      "integrity": "sha1-5iK956S9E4wJZH1LFKoOpwBIXeY=",
+      "requires": {
+        "turf-bearing": "^3.0.12",
+        "turf-destination": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-area": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-area/-/turf-area-3.0.12.tgz",
+      "integrity": "sha1-m35Gnvn7VY/RR7sMIUgjJjvb8Tw=",
+      "requires": {
+        "geojson-area": "^0.2.1"
+      }
+    },
+    "turf-bbox": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-bbox/-/turf-bbox-3.0.12.tgz",
+      "integrity": "sha1-P6BhF8hEOGDsgKxg/V0vEyC/sb4=",
+      "requires": {
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-bbox-polygon": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-bbox-polygon/-/turf-bbox-polygon-3.0.12.tgz",
+      "integrity": "sha1-Mw3AuzgyLWFUXflmzmyA9oWs9PI=",
+      "requires": {
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-bearing": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-bearing/-/turf-bearing-3.0.12.tgz",
+      "integrity": "sha1-ZfYJ3YUOc2THdxqm3th7DhkX/SA=",
+      "requires": {
+        "turf-invariant": "^3.0.12"
+      }
+    },
+    "turf-bezier": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-bezier/-/turf-bezier-3.0.12.tgz",
+      "integrity": "sha1-EC791KY7Jl7pyMFydjGSCzb03QI=",
+      "requires": {
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-buffer": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-buffer/-/turf-buffer-3.0.12.tgz",
+      "integrity": "sha1-IIQP58aqZ7JL4cq3/8xagv1r2XE=",
+      "requires": {
+        "geojson-normalize": "0.0.0",
+        "jsts": "1.1.2",
+        "turf-combine": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-center": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-center/-/turf-center-3.0.12.tgz",
+      "integrity": "sha1-Rd1sFym7hnKR4+AC6cdQb4xEAZY=",
+      "requires": {
+        "turf-bbox": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-centroid": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-centroid/-/turf-centroid-3.0.12.tgz",
+      "integrity": "sha1-6u4NaYIEtX/DOZS7G8hnuNopP48=",
+      "requires": {
+        "turf-helpers": "^3.0.12",
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-circle": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-circle/-/turf-circle-3.0.12.tgz",
+      "integrity": "sha1-FAshy0lQ8tPLxw0t8BKTaGf1iTA=",
+      "requires": {
+        "turf-destination": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-collect": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-collect/-/turf-collect-3.0.12.tgz",
+      "integrity": "sha1-bphtGnB9oxnMg+cjjQvN8Zqjx/I=",
+      "requires": {
+        "turf-inside": "^3.0.12"
+      }
+    },
+    "turf-combine": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-combine/-/turf-combine-3.0.12.tgz",
+      "integrity": "sha1-FnB0bw/c4NHqiqain/5UONRGz3M=",
+      "requires": {
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-concave": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-concave/-/turf-concave-3.0.12.tgz",
+      "integrity": "sha1-/KtgVpZbCoMZ9s2AJgEJXy/TqOs=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-meta": "^3.0.12",
+        "turf-tin": "^3.0.12",
+        "turf-union": "^3.0.12"
+      }
+    },
+    "turf-convex": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-convex/-/turf-convex-3.0.12.tgz",
+      "integrity": "sha1-qI3cPiLRy2WHlqnIXTraO9Pso1c=",
+      "requires": {
+        "convex-hull": "^1.0.3",
+        "turf-helpers": "^3.0.12",
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-destination": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-destination/-/turf-destination-3.0.12.tgz",
+      "integrity": "sha1-fdb7+X6G+DGibIPvLVovjR2KbeI=",
+      "requires": {
+        "turf-helpers": "^3.0.12",
+        "turf-invariant": "^3.0.12"
+      }
+    },
+    "turf-difference": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-difference/-/turf-difference-3.0.12.tgz",
+      "integrity": "sha1-nD0NdjBCEAW4slt/Bo7Z77S8bqc=",
+      "requires": {
+        "jsts": "1.1.2",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-distance": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-distance/-/turf-distance-3.0.12.tgz",
+      "integrity": "sha1-+5e4cF+s2ZOxReAUtBhiYQ7spEk=",
+      "requires": {
+        "turf-helpers": "^3.0.12",
+        "turf-invariant": "^3.0.12"
+      }
+    },
+    "turf-envelope": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-envelope/-/turf-envelope-3.0.12.tgz",
+      "integrity": "sha1-lpIdJ4zIxmRpLjIOJUO5FAgNeGs=",
+      "requires": {
+        "turf-bbox": "^3.0.12",
+        "turf-bbox-polygon": "^3.0.12"
+      }
+    },
+    "turf-explode": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-explode/-/turf-explode-3.0.12.tgz",
+      "integrity": "sha1-xa4owoTNAGxWUR7H1AjEilQU7P4=",
+      "requires": {
+        "turf-helpers": "^3.0.12",
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-flip": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-flip/-/turf-flip-3.0.12.tgz",
+      "integrity": "sha1-3rhoF3uf87sxDF1BqqxhqRVqPLs=",
+      "requires": {
+        "turf-meta": "^3.0.12"
+      }
+    },
+    "turf-grid": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/turf-grid/-/turf-grid-1.0.1.tgz",
+      "integrity": "sha1-uQSrxWS5ObYnpmrBXrFuBTgpuA8=",
+      "requires": {
+        "turf-point": "^2.0.0"
+      }
+    },
+    "turf-helpers": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-helpers/-/turf-helpers-3.0.12.tgz",
+      "integrity": "sha1-3UJy50s618lu7LeuXFf+jspUS3s="
+    },
+    "turf-hex-grid": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-hex-grid/-/turf-hex-grid-3.0.12.tgz",
+      "integrity": "sha1-BpjvZpAguzHY6cwgVtCr/K/ITo8=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-inside": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-inside/-/turf-inside-3.0.12.tgz",
+      "integrity": "sha1-m6QPpu7WO+x+fYiqZCdiLE3wcGY=",
+      "requires": {
+        "turf-invariant": "^3.0.12"
+      }
+    },
+    "turf-intersect": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-intersect/-/turf-intersect-3.0.12.tgz",
+      "integrity": "sha1-wNf7MFhDoZJ1ZwBXo50mixeDDYM=",
+      "requires": {
+        "jsts": "1.1.2"
+      }
+    },
+    "turf-invariant": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-invariant/-/turf-invariant-3.0.12.tgz",
+      "integrity": "sha1-O5UlOVOZHr2WLdNdT2cEwofejr4="
+    },
+    "turf-isolines": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-isolines/-/turf-isolines-3.0.12.tgz",
+      "integrity": "sha1-ALIz3+LuvU7LR6lPySPG7OyJx6s=",
+      "requires": {
+        "turf-bbox": "^3.0.12",
+        "turf-grid": "1.0.1",
+        "turf-helpers": "^3.0.12",
+        "turf-inside": "^3.0.12",
+        "turf-planepoint": "^3.0.12",
+        "turf-square": "^3.0.12",
+        "turf-tin": "^3.0.12"
+      }
+    },
+    "turf-kinks": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-kinks/-/turf-kinks-3.0.12.tgz",
+      "integrity": "sha1-6cmo26VyTZjyNQ/FveugaewzN1U=",
+      "requires": {
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-line-distance": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-line-distance/-/turf-line-distance-3.0.12.tgz",
+      "integrity": "sha1-cQj1smkH97jC3Rs5l4Zt06YOj18=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-line-slice": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-line-slice/-/turf-line-slice-3.0.12.tgz",
+      "integrity": "sha1-9fGszJKtrmnqGsCynwdSmijd6RY=",
+      "requires": {
+        "turf-bearing": "^3.0.12",
+        "turf-destination": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12",
+        "turf-point-on-line": "^3.0.12"
+      }
+    },
+    "turf-meta": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-meta/-/turf-meta-3.0.12.tgz",
+      "integrity": "sha1-CqmhyvgrKloI1U4IMLW1o/oOijg="
+    },
+    "turf-midpoint": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-midpoint/-/turf-midpoint-3.0.12.tgz",
+      "integrity": "sha1-sSdlroms3uhVb9XibJxfoEGgLL4=",
+      "requires": {
+        "turf-bearing": "^3.0.12",
+        "turf-destination": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-invariant": "^3.0.12"
+      }
+    },
+    "turf-nearest": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-nearest/-/turf-nearest-3.0.12.tgz",
+      "integrity": "sha1-cAIH9EQ/BQlvhs0kb5KfFw369G0=",
+      "requires": {
+        "turf-distance": "^3.0.12"
+      }
+    },
+    "turf-planepoint": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-planepoint/-/turf-planepoint-3.0.12.tgz",
+      "integrity": "sha1-LDeuDxf8sw22448NWe5sDdbKqa8="
+    },
+    "turf-point": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/turf-point/-/turf-point-2.0.1.tgz",
+      "integrity": "sha1-otzDCi0g9Ez1xicd97riwOIUYGk=",
+      "requires": {
+        "minimist": "^1.1.0"
+      }
+    },
+    "turf-point-grid": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-point-grid/-/turf-point-grid-3.0.12.tgz",
+      "integrity": "sha1-1gSXi+ELyeUzBq4CzvcJhDHbSXE=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-point-on-line": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-point-on-line/-/turf-point-on-line-3.0.12.tgz",
+      "integrity": "sha1-HYZjNU5wNy2xhj5iU+kEDEcSew8=",
+      "requires": {
+        "turf-bearing": "^3.0.12",
+        "turf-destination": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-point-on-surface": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-point-on-surface/-/turf-point-on-surface-3.0.12.tgz",
+      "integrity": "sha1-m+UFtrC6eOmFZQAd47OkJnEVJAo=",
+      "requires": {
+        "turf-center": "^3.0.12",
+        "turf-distance": "^3.0.12",
+        "turf-explode": "^3.0.12",
+        "turf-helpers": "^3.0.12",
+        "turf-inside": "^3.0.12"
+      }
+    },
+    "turf-random": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-random/-/turf-random-3.0.12.tgz",
+      "integrity": "sha1-NNuxQcPx6urhQk/Wxeq6H2+5seg=",
+      "requires": {
+        "geojson-random": "^0.2.2"
+      }
+    },
+    "turf-sample": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-sample/-/turf-sample-3.0.12.tgz",
+      "integrity": "sha1-eUn4YgYSBH4TFMHO2H6ZwUJGPNI=",
+      "requires": {
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-simplify": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-simplify/-/turf-simplify-3.0.12.tgz",
+      "integrity": "sha1-heRDyLRqordSY4lETHOB2qKtGec=",
+      "requires": {
+        "simplify-js": "^1.2.1"
+      }
+    },
+    "turf-square": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-square/-/turf-square-3.0.12.tgz",
+      "integrity": "sha1-Gjix4PsF/+D8qkMYji83lCpRW2Q=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-square-grid": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-square-grid/-/turf-square-grid-3.0.12.tgz",
+      "integrity": "sha1-PB2ArBRVbGgTtHi9oBJRLtS5Psg=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-tag": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-tag/-/turf-tag-3.0.12.tgz",
+      "integrity": "sha1-IoT/8Oih6Son1Kx/10cbPEjd0ag=",
+      "requires": {
+        "turf-inside": "^3.0.12"
+      }
+    },
+    "turf-tesselate": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-tesselate/-/turf-tesselate-3.0.12.tgz",
+      "integrity": "sha1-QUdLe1s4ILzyc/tx4YlNjDzUDTU=",
+      "requires": {
+        "earcut": "^2.0.0",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-tin": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-tin/-/turf-tin-3.0.12.tgz",
+      "integrity": "sha1-tlNGRHY6zhyd8kHJWNI4SFUlc4U=",
+      "requires": {
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-triangle-grid": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-triangle-grid/-/turf-triangle-grid-3.0.12.tgz",
+      "integrity": "sha1-gGR+V9r+CTRoeaKaGKDmKUrPEVk=",
+      "requires": {
+        "turf-distance": "^3.0.12",
+        "turf-helpers": "^3.0.12"
+      }
+    },
+    "turf-union": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-union/-/turf-union-3.0.12.tgz",
+      "integrity": "sha1-3+0OVUC4woVeSZTBRiHjpgyCnI4=",
+      "requires": {
+        "jsts": "1.1.2"
+      }
+    },
+    "turf-within": {
+      "version": "3.0.12",
+      "resolved": "https://registry.npmjs.org/turf-within/-/turf-within-3.0.12.tgz",
+      "integrity": "sha1-937q83cjhWG3+xM4526dEph0H5Q=",
+      "requires": {
+        "turf-helpers": "^3.0.12",
+        "turf-inside": "^3.0.12"
+      }
+    },
+    "two-product": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/two-product/-/two-product-1.0.2.tgz",
+      "integrity": "sha1-Z9ldSyV6kh4stL16+VEfkIhSLqo="
+    },
+    "two-sum": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/two-sum/-/two-sum-1.0.0.tgz",
+      "integrity": "sha1-MdPzIjnk9zHsqd+RVeKyl/AIq2Q="
+    },
     "type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -6088,6 +6690,11 @@
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.6.0.tgz",
       "integrity": "sha1-izixDKze9jM3uLJOT/htRa6lKag="
     },
+    "union-find": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/union-find/-/union-find-1.0.2.tgz",
+      "integrity": "sha1-KSusQV5q06iVNdI3AQ20pTYoTlg="
+    },
     "union-value": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/union-value/-/union-value-1.0.1.tgz",

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "watch": "webpack --watch",
-    "start": "webpack-dev-server --open",
+    "start": "webpack-dev-server --open --host 0.0.0.0",
     "build": "npx webpack --config webpack.config.js"
   },
   "repository": {
@@ -30,6 +30,8 @@
     "@types/mapbox-gl": "^1.8.1",
     "mapbox-gl": "^1.8.1",
     "mapbox-gl-draw-freehand-mode": "^1.0.3",
-    "style-loader": "^1.1.3"
+    "paper": "^0.12.4",
+    "style-loader": "^1.1.3",
+    "turf": "^3.0.14"
   }
 }

src/app.js

@@ -1,6 +1,6 @@
 'use strict';
 
-let currentPage = 3;
+let currentPage = 4;
 const tabs = document.getElementsByClassName('page');
 const validField = (formId, fieldId, customFieldId) => {
   const form = document.getElementById(formId);

src/draw.js

@@ -0,0 +1,24 @@
+'use strict';
+
+import paper from 'paper';
+paper.setup('canvas-area');
+
+const Tool = new paper.Tool();
+
+let path;
+
+Tool.onMouseDown = (event) => {
+  path = new paper.Path();
+  path.strokeColor = 'black';
+  path.add(event.point);
+}
+
+Tool.onMouseDrag = (event) => {
+	path.add(event.point);
+}
+
+Tool.onMouseUp = (event) => {
+    path.add(path.firstSegment);
+    path.close = true;
+    console.log(path.segments);
+}

src/map.js

@@ -3,6 +3,7 @@ import mapbox, { Map, Popup } from '../node_modules/mapbox-gl/dist/mapbox-gl.js'
 import MapboxDraw from '@mapbox/mapbox-gl-draw';
 import FreeHand from 'mapbox-gl-draw-freehand-mode';
 import '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css';
+import turf from 'turf';
 
 mapbox.accessToken = 'pk.eyJ1IjoidGluYW1hIiwiYSI6ImNpbWV2dDJudjAxM2Z0c2traGthOTJyZjYifQ.s_lP9rp2Iro7Urb4IZAzTQ';
 
@@ -19,7 +20,7 @@ const Draw = new MapboxDraw({
     polygon: true,
     trash: true
   }
-  });
+});
 
 const AddPopup = (map) => (area) => {
   let polygon = turf.polygon(area);

webpack.config.js

@@ -6,7 +6,8 @@ module.exports = {
   entry: {
     main: [
       './src/app.js',
-      './src/map.js'
+      './src/map.js',
+      './src/draw.js'
     ],
   },
   devServer: {