feat: more canvas css filters

1 files changed, 123 insertions, 3 deletions

diff --git a/index.html b/index.html
index 7fa40f9..91f1ca5 100644
--- a/index.html
+++ b/index.html
@@ -95,7 +95,7 @@
                 <input type="range"
                        id="brightness" 
                        class="brightness slider is-fullwidth is-primary" 
-                       min="0" max="2" value="1" step="0.05">
+                       min="0" max="2" value="1" step="0.01">
               </div>
             </div>
             <div class="field">
@@ -128,10 +128,70 @@
                        min="0" max="2" value="1" step="0.01">
               </div>
             </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-palette fa-fw"></i>
+                Color
+                <span class="icon is-pulled-right hue-rotate-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="hue-rotate" 
+                       class="hue-rotate slider is-fullwidth is-primary" 
+                       min="-180" max="180" value="0" step="1">
+              </div>
+            </div>
 
             <p class="menu-label">
-            Distortion
+            Filters
             </p>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-radio fa-fw"></i>
+                Grayscale
+                <span class="icon is-pulled-right grayscale-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="grayscale" 
+                       class="grayscale slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
+                Sepia
+                <span class="icon is-pulled-right sepia-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="sepia" 
+                       class="sepia slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
+            <div class="field">
+              <label class="label">
+                <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+                Invert
+                <span class="icon is-pulled-right invert-reset">
+                  <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+                </span>
+              </label>
+              <div class="control">
+                <input type="range"
+                       id="invert" 
+                       class="invert slider is-fullwidth is-primary" 
+                       min="0" max="1" value="0" step="0.01">
+              </div>
+            </div>
             <p class="menu-label">
             Blur and Sharpen
             </p>
@@ -219,10 +279,70 @@
                    min="0" max="2" value="1" step="0.01">
           </div>
         </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-palette fa-fw"></i>
+            Color
+            <span class="icon is-pulled-right hue-rotate-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="hue-rotate" 
+                   class="hue-rotate slider is-fullwidth is-primary" 
+                   min="-180" max="180" value="0" step="1">
+          </div>
+        </div>
 
         <p class="menu-label">
-        Distortion
+        Filters
         </p>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-radio fa-fw"></i>
+            Grayscale
+            <span class="icon is-pulled-right grayscale-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="grayscale" 
+                   class="grayscale slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-hat-cowboy-side fa-fw"></i>
+            Sepia
+            <span class="icon is-pulled-right sepia-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="sepia" 
+                   class="sepia slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
+        <div class="field">
+          <label class="label">
+            <i class="fa-solid fa-circle-half-stroke fa-fw"></i>
+            Invert
+            <span class="icon is-pulled-right invert-reset">
+              <i class="fa-solid fa-arrow-rotate-left fa-fw"></i>
+            </span>
+          </label>
+          <div class="control">
+            <input type="range"
+                   id="invert" 
+                   class="invert slider is-fullwidth is-primary" 
+                   min="0" max="1" value="0" step="0.01">
+          </div>
+        </div>
         <p class="menu-label">
         Blur and Sharpen
         </p>