feat: fixed the canvas backend, and updated the frontend

1 files changed, 6 insertions, 7 deletions

diff --git a/index.js b/index.js
index 43dc537..3ef5dd2 100644
--- a/index.js
+++ b/index.js
@@ -4,16 +4,17 @@ const ctx = canvas.getContext('2d');
 const canvasOffsetX = canvas.offsetLeft;
 const canvasOffsetY = canvas.offsetTop;
 
-canvas.width = window.innerWidth - canvasOffsetX;
-canvas.height = window.innerHeight - canvasOffsetY;
+canvas.width = window.innerWidth - canvasOffsetX * 2;
+canvas.height = window.innerHeight - canvasOffsetY * 2;
 
 let isPainting = false;
 let lineWidth = 5;
 let startX;
-let StartY;
-ctx.strokeStyle = "blue";
+let startY;
+ctx.strokeStyle = "skyblue";
 
 const draw = (e) => {
+    console.log(e);
     if (!isPainting) {
         return;
     }
@@ -21,14 +22,12 @@ const draw = (e) => {
     ctx.lineWidth = lineWidth;
     ctx.lineCap = 'round';
 
-    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
+    ctx.lineTo(e.pageX - canvasOffsetX, e.pageY - canvasOffsetY);
     ctx.stroke();
 
 }
 canvas.addEventListener('mousedown', (e) => {
     isPainting = true;
-    startX = e.clientX;
-    StartY = e.clientY;
 });
 
 canvas.addEventListener('mouseup', (e) => {