1 files changed, 23 insertions, 11 deletions

diff --git a/index.js b/index.js
index e217344..ff30475 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,6 @@
 const canvas = document.getElementById('drawing-board');
 const ctx = canvas.getContext('2d');
-const hit = document.getElementById("check");
+const reset = document.getElementById("reset");
 
 const canvasOffsetX = canvas.offsetLeft;
 const canvasOffsetY = canvas.offsetTop;
@@ -8,13 +8,16 @@ const canvasOffsetY = canvas.offsetTop;
 canvas.width = window.innerWidth - canvasOffsetX * 2;
 canvas.height = window.innerHeight - canvasOffsetY * 2;
 
+reset.style.top = canvasOffsetY + "px";
+reset.style.left = canvas.width - canvasOffsetX + "px";
+
 let isPainting = false;
-let lineWidth = 5;
-let strokeColor = "skyblue"
+let lineWidth = 2;
+let strokeColor = "red"
 let drawings = [];
 
 ctx.lineWidth = lineWidth;
-ctx.lineCap = 'round';
+ctx.lineCap = 'square';
 ctx.strokeStyle = strokeColor;
 
 const draw = (x, y) => {
@@ -22,21 +25,30 @@ const draw = (x, y) => {
         return;
     }
     
-    ctx.lineWidth = lineWidth;
-    ctx.lineCap = 'round';
 
-    ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY);
+    // ctx.lineTo(x - canvasOffsetX, y - canvasOffsetY);
     drawings.push({x : (x - canvasOffsetX)/canvas.width, y : (y - canvasOffsetY)/canvas.height});
     ctx.stroke();
     ctx.beginPath();
 }
 
+const drawCross = (x, y) => {
+    ctx.moveTo(x - 5, y - 5);
+    ctx.lineTo(x + 5, y + 5);
+    ctx.moveTo(x + 5, y - 5);
+    ctx.lineTo(x - 5, y + 5);
+    ctx.stroke();
+    ctx.beginPath();
+    setTimeout( ()=>{
+        ctx.fillStyle = "aliceblue";
+        ctx.fillRect(x - 7, y - 7, 14, 14);
+    }, 1 * 1000);
+}
+
 canvas.addEventListener('mousedown', (e) => {
     isPainting = true;
-    hit.style.display = "";
-    setTimeout(() => {
-        hit.style.display = "none"
-    }, 2 * 1000);
+
+    drawCross(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
 });
 
 /* canvas.addEventListener('mouseup', (e) => {