From 2a9cb520f345521af0c9fb2602f2ff5020e84bf0 Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Sat, 11 Sep 2021 15:41:41 -0400
Subject: [PATCH] Create draw and clear with pen color and width

---
 .../draw and clear with pen color and width   | 59 +++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 Chapter 13/draw and clear with pen color and width
diff --git a/Chapter 13/draw and clear with pen color and width b/Chapter 13/draw and clear with pen color and width
new file mode 100644
index 0000000..3f94658
--- /dev/null
+++ b/Chapter 13/draw and clear with pen color and width	
@@ -0,0 +1,59 @@
+<!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>
