canvas alignement

js/draw.js

@@ -0,0 +1,106 @@
+const canvas = document.getElementById("drawCanvas");
+const ctx = canvas.getContext("2d");
+
+ctx.lineWidth = 2;
+ctx.lineCap = "round";
+ctx.strokeStyle = "white";
+
+let drawing = false;
+let lineId = 0;
+
+const drawSocketUrl =
+  (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
+  window.location.host +
+  "/draw/ws";
+
+let drawSocket = new WebSocket(drawSocketUrl);
+
+drawSocket.onerror = (e) => {
+  console.log("error", e);
+};
+drawSocket.onclose = (e) => {
+  console.log("closed", e);
+};
+
+setTimeout(() => {
+  drawSocket.send("ping");
+}, 200);
+
+const sendMessage = (id, x, y) => {
+  if (drawSocket.readyState !== drawSocket.OPEN) {
+    drawSocket = new WebSocket(drawSocketUrl);
+  }
+
+  drawSocket.send(id + "," + x + "," + y);
+};
+
+const drawStart = () => {
+  ctx.beginPath();
+  lineId++;
+  drawing = true;
+};
+
+const drawStop = () => {
+  drawing = false;
+  ctx.closePath();
+};
+
+const drawMove = (e) => {
+  if (!drawing) return;
+  ctx.lineTo(e.offsetX, e.offsetY);
+  sendMessage(lineId, e.offsetX, e.offsetY);
+  ctx.stroke();
+};
+
+function touchStart(event) {
+  console.log("start");
+  drawStart(event.touches[0]);
+}
+function touchMove(event) {
+  console.log("move", event.touches[0]);
+  const e = {
+    offsetX: event.touches[0].clientX - canvas.offsetLeft,
+    offsetY: event.touches[0].clientY - canvas.offsetTop,
+  };
+  drawMove(e);
+  event.preventDefault();
+}
+function touchEnd(event) {
+  console.log("end");
+  drawStop(event.changedTouches[0]);
+}
+
+canvas.addEventListener("mousedown", drawStart);
+canvas.addEventListener("mouseup", drawStop);
+canvas.addEventListener("mousemove", drawMove);
+
+canvas.addEventListener("touchstart", touchStart, false);
+canvas.addEventListener("touchend", touchEnd, false);
+canvas.addEventListener("touchmove", touchMove, false);
+
+const receiveCanvas = document.getElementById("receiveCanvas");
+const recCtx = receiveCanvas.getContext("2d");
+recCtx.lineWidth = 2;
+recCtx.lineCap = "round";
+
+let receiveLineId = 0;
+
+drawSocket.addEventListener("message", function (event) {
+  const parts = event.data.split(",");
+  if (parts[0] != receiveLineId) {
+    recCtx.closePath();
+    recCtx.beginPath();
+    receiveLineId = parts[0];
+    recCtx.moveTo(parts[1], parts[2]);
+  } else {
+    recCtx.lineTo(parts[1], parts[2]);
+    recCtx.stroke();
+  }
+});
+
+setInterval(() => {
+  if (drawSocket.readyState !== drawSocket.OPEN) {
+    drawSocket = new WebSocket(drawSocketUrl);
+  }
+  drawSocket.send("ping");
+}, 10000);

views/draw.html

@@ -1,93 +1,21 @@
 {{block "draw" .}}
+<div style="width:500px; height:500px">
+  <canvas
+  id="receiveCanvas"
+  width="500"
+  height="500"
+  style="position:absolute; border: 1px solid black ;background-color: transparent"
+></canvas>
 <canvas
   id="drawCanvas"
   width="500"
   height="500"
-  style="border: 1px solid black"
+  style="position:absolute; border: 1px solid black; background-color: transparent;"
-></canvas>
-<canvas
-  id="receiveCanvas"
-  width="500"
-  height="500"
-  style="border: 1px solid black"
 ></canvas>
 
-<script>
+<div>
-  const canvas = document.getElementById("drawCanvas");
-  const ctx = canvas.getContext("2d");
-  ctx.lineWidth = 2;
-  ctx.lineCap = "round";
 
-  let drawing = false;
+<script src="/js/draw.js">
-  let lineId = 0;
  
-  const drawSocketUrl =
-    (window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
-    window.location.host +
-    "/draw/ws";
-
-  let drawSocket = new WebSocket(drawSocketUrl);
-
-  drawSocket.onerror = (e) => {
-    console.log("error", e);
-  };
-  drawSocket.onclose = (e) => {
-    console.log("closed", e);
-  };
-
-  setTimeout(() => {
-    drawSocket.send("ping");
-  }, 200);
-
-  const sendMessage = (id, x, y) => {
-    if (drawSocket.readyState !== drawSocket.OPEN) {
-      drawSocket = new WebSocket(drawSocketUrl);
-    }
-
-    drawSocket.send(id + "," + x + "," + y);
-  };
-
-  canvas.addEventListener("mousedown", () => {
-    ctx.beginPath();
-    lineId++;
-    drawing = true;
-  });
-  canvas.addEventListener("mouseup", () => {
-    drawing = false;
-    ctx.closePath();
-  });
-  canvas.addEventListener("mousemove", (e) => {
-    if (!drawing) return;
-    ctx.lineTo(e.offsetX, e.offsetY);
-    sendMessage(lineId, e.offsetX, e.offsetY);
-    ctx.stroke();
-  });
-
-  const receiveCanvas = document.getElementById("receiveCanvas");
-  const recCtx = receiveCanvas.getContext("2d");
-  recCtx.lineWidth = 2;
-  recCtx.lineCap = "round";
-
-  let receiveLineId = 0;
-
-  drawSocket.addEventListener("message", function (event) {
-    const parts = event.data.split(",");
-    if (parts[0] != receiveLineId) {
-      recCtx.closePath();
-      recCtx.beginPath();
-      receiveLineId = parts[0];
-      recCtx.moveTo(parts[1], parts[2]);
-    } else {
-      recCtx.lineTo(parts[1], parts[2]);
-      recCtx.stroke();
-    }
-  });
-
-  setInterval(() => {
-    if (drawSocket.readyState !== drawSocket.OPEN) {
-      drawSocket = new WebSocket(drawSocketUrl);
-    }
-    drawSocket.send("ping");
-  }, 10000);
 </script>
 {{end}}