add Circle and React shapes to the drawing cursor

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>
 

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
 
@@ -33,8 +34,12 @@ canvas.addEventListener('mousemove', (e) => {
         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";})

drawing-app/style.css

@@ -44,3 +44,7 @@ canvas {
 .toolbox > *:last-child {
   margin-left: auto;
 }
+img{
+  width:45px;
+  height:45px;
+}