feature: rotate img| fixes: on reset filters update canvas

Mohamed-Ayman01 · Sep 28, 2023 · b37b4b7 · b37b4b7
1 parent 23bcb58
commit b37b4b7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 <body>
   <div class="container">
     <h1>easy image editor</h1>
-    <!-- filter options - img view-->
+    <!-- filter options - img view -->
     <div class="options-and-view">
       <!-- options -->
       <div class="options">
@@ -63,7 +63,7 @@ <h2>rotate & flip</h2>
       </canvas>
       <!-- view -->
     </div>
-    <!-- filter options - img view-->
+    <!-- filter options - img view -->
 
     <!-- reset and save options -->
     <div class="reset-and-file">

diff --git a/main.js b/main.js
@@ -146,18 +146,30 @@ allFilterInputRange.forEach((input) => {
 
 let rotateLeftBtn = document.querySelector(".rotate-left");
 
-// ! fix here
 rotateLeftBtn.addEventListener("click", _ => {
   clearCanvas();
 
   ctx.translate(canvas.width / 2, canvas.height / 2);
-  ctx.rotate(90 * Math.PI / 180);
+  ctx.rotate(-90 * Math.PI / 180);
+  ctx.translate(-(canvas.width / 2), -(canvas.height / 2));
 
   drawImg()
+});
+
+let rotateRighBtn = document.querySelector(".rotate-right");
 
+rotateRighBtn.addEventListener("click", _ => {
+  clearCanvas();
+
+  ctx.translate(canvas.width / 2, canvas.height / 2);
+  ctx.rotate(90 * Math.PI / 180);
   ctx.translate(-(canvas.width / 2), -(canvas.height / 2));
+
+  drawImg()
 });
 
+// ! Reset Filters
+
 let resetFiltersBtn = document.querySelector(".reset-and-file .reset");
 
 resetFiltersBtn.addEventListener("click", _ => {
@@ -166,15 +178,21 @@ resetFiltersBtn.addEventListener("click", _ => {
   canvasData.invert = "";
   canvasData.grayscale = "";
 
+  clearCanvas();
+
+  ctx.filter = "none"
+
+  drawImg();
+
   allFilterInputRange.forEach(input => {
     let filterName = input.parentNode.getAttribute("data-filter");
 
     if (filterName == "saturate" || filterName == "brightness") {
       input.value = 100;
-      input.parentNode.querySelector(".precent").textContent = "100";
+      input.parentNode.querySelector(".precent").textContent = "100%";
     } else {
       input.value = 0;
-      input.parentNode.querySelector(".precent").textContent = "0";
+      input.parentNode.querySelector(".precent").textContent = "0%";
     }
 
   })