test drawings

script.js

@@ -6,9 +6,9 @@ var bufferSize = 5;
 
 var svgElement = document.getElementById("svg-canvas");
 
-svgElement.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.scrollHeight}`);
+svgElement.setAttribute("viewBox", `0 0 ${window.innerWidth} ${window.innerHeight}`);
 svgElement.setAttribute("width", `${window.innerWidth}px`);
-svgElement.setAttribute("height", `${window.scrollHeight}px`);
+svgElement.setAttribute("height", `${document.innerHeight}px`);
 
 var rect = svgElement.getBoundingClientRect();
 var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
@@ -107,8 +107,17 @@ var updateSvgPath = function () {
 };
 
 const presets = document.querySelectorAll(".preset");
+
 for (const preset of presets) {
-	preset.addEventListener("mousemove", (e) => {
-		console.log(preset.dataset.path);
-	});
+	if (preset.dataset.path) {
+		let offset = preset.getBoundingClientRect();
+		let drawing = preset.dataset.path.split(" ");
+		let index = 1;
+
+		preset.addEventListener("mousemove", (e) => {
+			strPath += ` ${drawing[index]}`;
+			index += 1;
+			path.setAttribute("d", strPath);
+		});
+	}
 }

style.css

@@ -23,5 +23,7 @@ svg {
     width: 32ch;
     height: 18ch;
     margin: 100px;
+    position: relative;
+    z-index: 100;
 }