ADD: click function to draw dots

drawing-app/script.js

@@ -1,86 +1,96 @@
-const canvas = document.getElementById('canvas');
+const canvas = document.getElementById("canvas");
-const increaseBtn = document.getElementById('increase');
+const increaseBtn = document.getElementById("increase");
-const decreaseBtn = document.getElementById('decrease');
+const decreaseBtn = document.getElementById("decrease");
-const sizeEL = document.getElementById('size');
+const sizeEL = document.getElementById("size");
-const colorEl = document.getElementById('color');
+const colorEl = document.getElementById("color");
-const clearEl = document.getElementById('clear');
+const clearEl = document.getElementById("clear");
 
-const ctx = canvas.getContext('2d');
+const ctx = canvas.getContext("2d");
 
-let size = 10
+let size = 10;
-let isPressed = false
+let isPressed = false;
-colorEl.value = 'black'
+colorEl.value = "black";
-let color = colorEl.value
+let color = colorEl.value;
-let x
+let x;
-let y
+let y;
 
-canvas.addEventListener('mousedown', (e) => {
+canvas.addEventListener("mousedown", (e) => {
-    isPressed = true
+  isPressed = true;
 
-    x = e.offsetX
+  x = e.offsetX;
-    y = e.offsetY
+  y = e.offsetY;
-})
+});
 
-canvas.addEventListener('mouseup', (e) => {
+canvas.addEventListener("mouseup", (e) => {
-    isPressed = false
+  isPressed = false;
 
-    x = undefined
+  x = undefined;
-    y = undefined
+  y = undefined;
-})
+});
 
-canvas.addEventListener('mousemove', (e) => {
+canvas.addEventListener("mousemove", (e) => {
-    if(isPressed) {
+  if (isPressed) {
-        const x2 = e.offsetX
+    const x2 = e.offsetX;
-        const y2 = e.offsetY
+    const y2 = e.offsetY;
 
-        drawCircle(x2, y2)
+    drawCircle(x2, y2);
-        drawLine(x, y, x2, y2)
+    drawLine(x, y, x2, y2);
 
-        x = x2
+    x = x2;
-        y = y2
+    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.beginPath();
-    ctx.arc(x, y, size, 0, Math.PI * 2)
+  ctx.arc(x, y, size, 0, Math.PI * 2);
-    ctx.fillStyle = color
+  ctx.fillStyle = color;
-    ctx.fill()
+  ctx.fill();
 }
 
 function drawLine(x1, y1, x2, y2) {
-    ctx.beginPath()
+  ctx.beginPath();
-    ctx.moveTo(x1, y1)
+  ctx.moveTo(x1, y1);
-    ctx.lineTo(x2, y2)
+  ctx.lineTo(x2, y2);
-    ctx.strokeStyle = color
+  ctx.strokeStyle = color;
-    ctx.lineWidth = size * 2
+  ctx.lineWidth = size * 2;
-    ctx.stroke()
+  ctx.stroke();
 }
 
 function updateSizeOnScreen() {
-    sizeEL.innerText = size
+  sizeEL.innerText = size;
 }
 
-increaseBtn.addEventListener('click', () => {
+increaseBtn.addEventListener("click", () => {
-    size += 5
+  size += 5;
 
-    if(size > 50) {
+  if (size > 50) {
-        size = 50
+    size = 50;
-    }
+  }
 
-    updateSizeOnScreen()
+  updateSizeOnScreen();
-})
+});
 
-decreaseBtn.addEventListener('click', () => {
+decreaseBtn.addEventListener("click", () => {
-    size -= 5
+  size -= 5;
 
-    if(size < 5) {
+  if (size < 5) {
-        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)
+);