From b1497197999b96b0ac26bd2e41547942f6edbb0b Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 2 Jul 2021 13:18:08 -0400
Subject: [PATCH] Create draw on canvas

---
 Chapter 13/draw on canvas | 91 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 Chapter 13/draw on canvas
diff --git a/Chapter 13/draw on canvas b/Chapter 13/draw on canvas
new file mode 100644
index 0000000..8bcf0c1
--- /dev/null
+++ b/Chapter 13/draw on canvas	
@@ -0,0 +1,91 @@
+<!doctype html>
+<html>
+
+<head>
+    <title>Canvas HTML5</title>
+    <style>
+        #canvas {
+            border: 1px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <canvas id="canvas" width="600" height="400"></canvas>
+    <div>
+        <button class="save">Save</button>
+        <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 class="output"></div>
+    <script>
+        const canvas = document.querySelector('#canvas');
+        const ctx = canvas.getContext('2d');
+        const penColor = document.querySelector('#penColor');
+        const penWidth = document.querySelector('#penWidth');
+        const btnSave = document.querySelector('.save');
+        const btnClear = document.querySelector('.clear');
+        const output = document.querySelector('.output');
+        const mLoc = {
+            draw: false, x: 0, y: 0, lastX: 0, lastY: 0
+        };
+        canvas.style.border = '1px solid black';
+        btnSave.addEventListener('click', saveImg);
+        btnClear.addEventListener('click', clearCanvas);
+
+        canvas.addEventListener('mousemove', (e) => {
+            mLoc.lastX = mLoc.x;
+            mLoc.lastY = mLoc.y;
+            //console.log(e);
+            mLoc.x = e.clientX;
+            mLoc.y = e.clientY;
+            draw();
+        })
+
+        canvas.addEventListener('mousedown', (e) => {
+            mLoc.draw = true;
+        })
+        canvas.addEventListener('mouseup', (e) => {
+            mLoc.draw = false;
+        })
+        canvas.addEventListener('mouseout', (e) => {
+            mLoc.draw = false;
+        })
+
+        function saveImg() {
+            const dataURL = canvas.toDataURL();
+            console.log(dataURL);
+            const img = document.createElement('img');
+            output.prepend(img);
+            img.setAttribute('src', dataURL);
+            const link = document.createElement('a');
+            output.append(link);
+            let fileName = Math.random().toString(16).substr(-8) + '.png'
+            link.setAttribute('download', fileName);
+            link.href = dataURL;
+            link.click();
+            output.removeChild(link);
+        }
+        function clearCanvas() {
+            let temp = confirm('clear canvas?');
+            if (temp) {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+        }
+
+        function draw() {
+            if (mLoc.draw) {
+                ctx.beginPath();
+                ctx.moveTo(mLoc.lastX, mLoc.lastY);
+                ctx.lineTo(mLoc.x, mLoc.y);
+                ctx.strokeStyle = penColor.value;
+                ctx.lineWidth = penWidth.value;
+                ctx.stroke();
+                ctx.closePath();
+            }
+        }
+    </script>
+</body>
+
+</html>
