From a3d927be6ccfb518e9a7c2191a59568ca878839c Mon Sep 17 00:00:00 2001
From: omaranBazna <omran4d@gmail.com>
Date: Sun, 5 Jun 2022 23:12:46 -0400
Subject: [PATCH] add Circle and React shapes to the drawing cursor

---
 drawing-app/index.html |  2 ++
 drawing-app/script.js  | 25 ++++++++++++++++++++-----
 drawing-app/style.css  |  4 ++++
 3 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/drawing-app/index.html b/drawing-app/index.html
index 8edb4e2..da92622 100644
--- a/drawing-app/index.html
+++ b/drawing-app/index.html
@@ -13,6 +13,8 @@
       <span id="size">10</span>
       <button id="increase">+</button>
       <input type="color" id="color">
+      <button id="circle"><img src="https://d1nhio0ox7pgb.cloudfront.net/_img/o_collection_png/green_dark_grey/512x512/plain/shape_circle.png"></button>
+      <button id="rect"><img src="https://iconarchive.com/download/i90603/icons8/windows-8/Editing-Rectangle-Stroked.ico"></button>
       <button id="clear">X</button>
     </div>
 
diff --git a/drawing-app/script.js b/drawing-app/script.js
index 833a43f..4818432 100644
--- a/drawing-app/script.js
+++ b/drawing-app/script.js
@@ -4,7 +4,8 @@ const decreaseBtn = document.getElementById('decrease');
 const sizeEL = document.getElementById('size');
 const colorEl = document.getElementById('color');
 const clearEl = document.getElementById('clear');
-
+const circle=document.getElementById("circle")
+const rect=document.getElementById("rect")
 const ctx = canvas.getContext('2d');
 
 let size = 10
@@ -13,7 +14,7 @@ colorEl.value = 'black'
 let color = colorEl.value
 let x
 let y
-
+let type="circle"
 canvas.addEventListener('mousedown', (e) => {
     isPressed = true
 
@@ -32,10 +33,14 @@ canvas.addEventListener('mousemove', (e) => {
     if(isPressed) {
         const x2 = e.offsetX
         const y2 = e.offsetY
-
+    
+       if(type=="circle"){
         drawCircle(x2, y2)
-        drawLine(x, y, x2, y2)
-
+       }else{
+        drawRect(x2,y2)
+       }
+     
+        
         x = x2
         y = y2
     }
@@ -48,6 +53,14 @@ function drawCircle(x, y) {
     ctx.fill()
 }
 
+
+function drawRect(x, y) {
+    ctx.beginPath();
+   ctx.rect(x-size/2, y-size/2, size,size);
+    ctx.fillStyle = color
+    ctx.fill()
+}
+
 function drawLine(x1, y1, x2, y2) {
     ctx.beginPath()
     ctx.moveTo(x1, y1)
@@ -84,3 +97,5 @@ decreaseBtn.addEventListener('click', () => {
 colorEl.addEventListener('change', (e) => color = e.target.value)
 
 clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height))
+circle.addEventListener('click',()=>{type="circle"})
+rect.addEventListener('click',()=>{type="rect";})
\ No newline at end of file
diff --git a/drawing-app/style.css b/drawing-app/style.css
index 8c45752..eb33ce0 100644
--- a/drawing-app/style.css
+++ b/drawing-app/style.css
@@ -44,3 +44,7 @@ canvas {
 .toolbox > *:last-child {
   margin-left: auto;
 }
+img{
+  width:45px;
+  height:45px;
+}
\ No newline at end of file