From 0b09b37039d2228a933f4f68eb829bcbd26c5f8a Mon Sep 17 00:00:00 2001
From: Eli-b-good <eli.i.henderson95@gmail.com>
Date: Tue, 27 Apr 2021 00:24:44 -0400
Subject: [PATCH] ADD: click function to draw dots

---
 drawing-app/script.js | 130 +++++++++++++++++++++++-------------------
 1 file changed, 70 insertions(+), 60 deletions(-)

diff --git a/drawing-app/script.js b/drawing-app/script.js
index f9f4389..ae3c634 100644
--- a/drawing-app/script.js
+++ b/drawing-app/script.js
@@ -1,86 +1,96 @@
-const canvas = document.getElementById('canvas');
-const increaseBtn = document.getElementById('increase');
-const decreaseBtn = document.getElementById('decrease');
-const sizeEL = document.getElementById('size');
-const colorEl = document.getElementById('color');
-const clearEl = document.getElementById('clear');
+const canvas = document.getElementById("canvas");
+const increaseBtn = document.getElementById("increase");
+const decreaseBtn = document.getElementById("decrease");
+const sizeEL = document.getElementById("size");
+const colorEl = document.getElementById("color");
+const clearEl = document.getElementById("clear");
 
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 
-let size = 10
-let isPressed = false
-colorEl.value = 'black'
-let color = colorEl.value
-let x
-let y
+let size = 10;
+let isPressed = false;
+colorEl.value = "black";
+let color = colorEl.value;
+let x;
+let y;
 
-canvas.addEventListener('mousedown', (e) => {
-    isPressed = true
+canvas.addEventListener("mousedown", (e) => {
+  isPressed = true;
 
-    x = e.offsetX
-    y = e.offsetY
-})
+  x = e.offsetX;
+  y = e.offsetY;
+});
 
-canvas.addEventListener('mouseup', (e) => {
-    isPressed = false
+canvas.addEventListener("mouseup", (e) => {
+  isPressed = false;
 
-    x = undefined
-    y = undefined
-})
+  x = undefined;
+  y = undefined;
+});
 
-canvas.addEventListener('mousemove', (e) => {
-    if(isPressed) {
-        const x2 = e.offsetX
-        const y2 = e.offsetY
+canvas.addEventListener("mousemove", (e) => {
+  if (isPressed) {
+    const x2 = e.offsetX;
+    const y2 = e.offsetY;
 
-        drawCircle(x2, y2)
-        drawLine(x, y, x2, y2)
+    drawCircle(x2, y2);
+    drawLine(x, y, x2, y2);
 
-        x = x2
-        y = y2
-    }
-})
+    x = x2;
+    y = y2;
+  }
+});
+
+//draw dot when clicked
+canvas.addEventListener("click", (e) => {
+  x = e.offsetX;
+  y = e.offsetY;
+
+  drawCircle(x, y);
+});
 
 function drawCircle(x, y) {
-    ctx.beginPath();
-    ctx.arc(x, y, size, 0, Math.PI * 2)
-    ctx.fillStyle = color
-    ctx.fill()
+  ctx.beginPath();
+  ctx.arc(x, y, size, 0, Math.PI * 2);
+  ctx.fillStyle = color;
+  ctx.fill();
 }
 
 function drawLine(x1, y1, x2, y2) {
-    ctx.beginPath()
-    ctx.moveTo(x1, y1)
-    ctx.lineTo(x2, y2)
-    ctx.strokeStyle = color
-    ctx.lineWidth = size * 2
-    ctx.stroke()
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = size * 2;
+  ctx.stroke();
 }
 
 function updateSizeOnScreen() {
-    sizeEL.innerText = size
+  sizeEL.innerText = size;
 }
 
-increaseBtn.addEventListener('click', () => {
-    size += 5
+increaseBtn.addEventListener("click", () => {
+  size += 5;
 
-    if(size > 50) {
-        size = 50
-    }
+  if (size > 50) {
+    size = 50;
+  }
 
-    updateSizeOnScreen()
-})
+  updateSizeOnScreen();
+});
 
-decreaseBtn.addEventListener('click', () => {
-    size -= 5
+decreaseBtn.addEventListener("click", () => {
+  size -= 5;
 
-    if(size < 5) {
-        size = 5
-    }
+  if (size < 5) {
+    size = 5;
+  }
 
-    updateSizeOnScreen()
-})
+  updateSizeOnScreen();
+});
 
-colorEl.addEventListener('change', (e) => color = e.target.value)
+colorEl.addEventListener("change", (e) => (color = e.target.value));
 
-clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))
+clearEl.addEventListener("click", () =>
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+);