From f65e6dc4c81c3d625da90fb89eab20b36b3d1aa9 Mon Sep 17 00:00:00 2001
From: Karan <50290386+Sonawane-Karan26@users.noreply.github.com>
Date: Wed, 24 Nov 2021 21:40:18 +0530
Subject: [PATCH] Exercise 14.7

---
 Chapter 14/Exercise 14.7 | 60 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 Chapter 14/Exercise 14.7
diff --git a/Chapter 14/Exercise 14.7 b/Chapter 14/Exercise 14.7
new file mode 100644
index 0000000..6d4cab6
--- /dev/null
+++ b/Chapter 14/Exercise 14.7	
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+<head>
+    <style>
+        canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+<body>
+    <div class="controls">
+        <button class="clear">Clear</button> <span>Color
+            <input type="color" value="#ffff00" id="penColor"></span> <span>Width
+            <input type="range" min="1" max="20" value="10" id="penWidth"></span> </div>
+    </div>
+    <canvas id="canvas"></canvas>
+    <script>
+        window.onload = init;
+        const canvas = document.getElementById("canvas");
+        const ctx = canvas.getContext("2d");
+        canvas.style.border = "1px solid black";
+        const penColor = document.querySelector("#penColor");
+        const penWidth = document.querySelector("#penWidth");
+        document.querySelector(".clear").addEventListener("click", clearImg);
+        canvas.width = 700;
+        canvas.height = 700;
+        let pos = {
+            x: 0,
+            y: 0,
+        };
+        function init() {
+            canvas.addEventListener("mousemove", draw);
+            canvas.addEventListener("mousemove", setPosition);
+            canvas.addEventListener("mouseenter", setPosition);
+        }
+        function draw(e) {
+            if (e.buttons !== 1) return;
+            ctx.beginPath();
+            ctx.moveTo(pos.x, pos.y);
+            setPosition(e);
+            ctx.lineTo(pos.x, pos.y);
+            ctx.strokeStyle = penColor.value;
+            ctx.lineWidth = penWidth.value;
+            ctx.lineCap = "round";
+            ctx.stroke();
+        }
+        function setPosition(e) {
+            pos.x = e.pageX;
+            pos.y = e.pageY;
+        }
+        function clearImg() {
+            const temp = confirm("Clear confirm?");
+            if (temp) {
+                ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+            }
+        }
+    </script>
+
+</body>
+</html>
