From df61bda4340e61cbdfb2471b89342932a9864ec0 Mon Sep 17 00:00:00 2001
From: Moritz Langenstein <ml5717@ic.ac.uk>
Date: Thu, 10 Oct 2019 09:05:32 +0100
Subject: [PATCH] (ml5717) Added svg canvas and public/index.html
---
public/index.html | 55 +++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 55 insertions(+)
create mode 100644 public/index.html
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..0be8682
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ </head>
+ <body>
+ <textarea style="width: 100%; height: 500px" id="textfield"></textarea>
+ <script src="js/app.js"></script>
+
+ <svg id="whiteboard" width="100%" height="100%"></svg>
+ <script>
+ var whiteboard = document.getElementById("whiteboard")
+
+ var painting = false
+ var path
+
+ whiteboard.onmousedown = function(e) {
+ painting = true
+
+ var mouse = {
+ x: e.offsetX,
+ y: e.offsetY
+ }
+
+ path = document.createElementNS("http://www.w3.org/2000/svg", "path")
+
+ path.setAttribute("d", "M" + mouse.x + " " + mouse.y)
+ path.setAttribute("stroke", "blue")
+ path.setAttribute("stroke-width", 3)
+ path.setAttribute("fill", "none")
+ path.setAttribute("pointer-events", "none")
+
+ whiteboard.appendChild(path)
+ }
+
+ whiteboard.onmouseup = function(e) {
+ painting = false
+ }
+
+ whiteboard.onmousemove = function(e) {
+ var mouse = {
+ x: e.offsetX,
+ y: e.offsetY
+ }
+
+ if (painting) {
+ path.setAttribute(
+ "d",
+ path.getAttribute("d") + " L" + mouse.x + " " + mouse.y
+ )
+ }
+ }
+ </script>
+ </body>
+</html>
--
GitLab