docs: document mask methods (#54)

Author: EscapedGibbon

docs/Features/Comparison/Addition.md

@@ -6,10 +6,6 @@ _Makes an addition between two images._
 
 [Check options and parameters of `add` method](https://image-js.github.io/image-js-typescript/classes/Image.html#add 'github.io link')
 
-:::caution
-This method works only with images.
-:::
-
 `add` method, opposed to [subtraction](./Subtraction.md 'internal link on subtract'), takes another Image and makes an addition between each respective pixel value.
 It works like this:
 

docs/Features/Comparison/Comparison.md

@@ -5,18 +5,12 @@ sidebar_position: 0
 Comparison methods are methods that compare other images for feature matching or change detection by subtraction or addition of image values etc.
 The specific reasons for comparing images depend on the application and the desired outcome. In many cases, it is also a valuable tool for identifying changes, isolating objects, enhancing features, and improving image quality for various purposes.
 
-### Methods that can be applied on Images only
-
-- [`add`](./Addition.md 'internal link on add')
-
-- [`hypotenuse`](./Hypotenuse.md 'internal link on hypotenuse')
-
-### Methods that can be applied on Masks only
-
-- [and](./Logical%20conjunction.md 'internal link on and')
-
-- [or](./Logical%20disjunction.md 'internal link on or')
-
-### Methods that can be applied on Images and Masks
-
-- [`subtract`](./Subtraction.md 'internal link on subtract')
+### Methods
+
+| Can be applied on                                                               | Images   | Masks    |
+| ------------------------------------------------------------------------------- | -------- | -------- |
+| [Addition(`add`)](./Addition.md 'internal link on add')                         | ✅  | ❌ |
+| [Subtraction( `subtract` )](./Subtraction.md 'internal link on subtract')       | ✅  | ✅  |
+| [Hypotenuse( `hypotenuse` )](./Hypotenuse.md 'internal link on hypotenuse')     | ✅  | ❌ |
+| [Logical conjunction(`and`)](./Logical%20conjunction.md 'internal link on and') | ❌ | ✅  |
+| [Logical disjunction(`or`)](./Logical%20disjunction.md 'internal link on or')   | ❌ | ✅  |

docs/Features/Comparison/Hypotenuse.md

@@ -4,11 +4,7 @@ sidebar_position: 30
 
 _Calculates the euclidean distance of two points between two images._
 
-[Check options and parameters of `hypotenuse` method](https://image-js.github.io/image-js-typescript/classes/Image.html#hypotenuse 'github.io link')
-
-:::caution
-This method works only with images.
-:::
+[🖼️ Image options and parameters of `hypotenuse` method](https://image-js.github.io/image-js-typescript/classes/Image.html#hypotenuse 'github.io link')
 
 A "hypotenuse filter" is using two compatible images to change values of each pixel by calculating [Euclidean distance](https://en.wikipedia.org/wiki/Euclidean_distance 'wikipedia link on Euclidean distance') with the formula:
 

docs/Features/Comparison/Logical conjunction.md

@@ -4,11 +4,7 @@ sidebar_position: 100
 
 _Makes a logical conjunction between masks._
 
-[Check options and parameters of `and` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#and 'github.io link')
-
-:::caution
-This method works only with masks.
-:::
+[🎭 Mask options and parameters of `and` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#and 'github.io link')
 
 `and` method performs a [logical conjunction](https://en.wikipedia.org/wiki/Logical_conjunction 'wikipedia link on logical conjunction') between bits of two masks.
 

docs/Features/Comparison/Logical disjunction.md

@@ -4,11 +4,7 @@ sidebar_position: 110
 
 _Makes a logical disjunction between masks._
 
-[Check options and parameters of `or` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#or 'github.io link')
-
-:::caution
-This method works only with masks
-:::
+[🎭 Mask options and parameters of `or` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#or 'github.io link')
 
 `or` method performs a [logical disjunction](https://en.wikipedia.org/wiki/Logical_disjunction 'wikipedia link on logical disjunction') between bits of two masks.
 

docs/Features/Comparison/Subtraction.md

@@ -4,7 +4,8 @@ sidebar_position: 20
 
 _Makes a subtraction between two images._
 
-[Check options and parameters of `subtract` method](https://image-js.github.io/image-js-typescript/classes/Image.html#subtract 'github.io link')
+[🖼️ Image options and parameters of `subtract` method](https://image-js.github.io/image-js-typescript/classes/Image.html#subtract 'github.io link')  
+[🎭 Mask options and parameters of `subtract` method](https://image-js.github.io/image-js-typescript/classes/Mask.html#subtract 'github.io link')
 
 Method called `subtract`, as the name suggests, takes another Image(or Mask) and makes a subtraction between each respective bit.
 It works like this:
@@ -26,6 +27,10 @@ Both masks must have the same size for compatibility reasons. Images must have t
 
 ### Parameters and default values
 
+:::info
+Parameters and options for Images and Masks are the same.
+:::
+
 - `other`
 
 - `options`
@@ -35,3 +40,7 @@ Both masks must have the same size for compatibility reasons. Images must have t
 | Property                                                                                                   | Required | Default value |
 | ---------------------------------------------------------------------------------------------------------- | -------- | ------------- |
 | [`absolute`](https://image-js.github.io/image-js-typescript/interfaces/SubtractImageOptions.html#absolute) | no       | `false`       |
+
+:::info
+The method is also available for Masks.
+:::

docs/Features/Fill.md

@@ -1,4 +1,4 @@
-[Check options and parameters of `fill` method](https://image-js.github.io/image-js-typescript/classes/Image.html#fill 'github.io link')
+[🎭 Mask options and parameters of `fill` method](https://image-js.github.io/image-js-typescript/classes/Image.html#fill 'github.io link')
 
 Fill method fills the whole Mask with a designated value.
 It works like this:

docs/Features/Filters/Blur.md

@@ -2,15 +2,11 @@
 sidebar_position: 30
 ---
 
-import BlurDemo from './blur.demo.tsx'
+import BlurDemo from './demos/blur.demo.tsx'
 
 _Reduces image details and sharpness by averaging or mixing neighboring pixel values._
 
-[Check options and parameters of `blur` method](https://image-js.github.io/image-js-typescript/classes/Image.html#blur 'link on github io')
-
-:::caution
-This method works only with images.
-:::
+[🖼️ Image options and parameters of `blur` method](https://image-js.github.io/image-js-typescript/classes/Image.html#blur 'link on github io')
 
 Blur, also known as average blur or box blur, is a simple image processing technique used to reduce noise and smooth out images. It involves replacing the color value of a pixel with the average color value of its neighboring pixels within a specified window or kernel. This process effectively blurs the image and reduces high-frequency noise.
 

docs/Features/Filters/Derivative.md

@@ -2,16 +2,11 @@
 sidebar_position: 70
 ---
 
-import DerivativeDemo from './derivative.demo.tsx'
-import GradientDemo from './gradient.demo.tsx'
+import DerivativeDemo from './demos//derivative.demo.tsx'
 
 _Gradient filter but using predefined kernels._
 
-[Check options and parameters of `derivative` method](https://image-js.github.io/image-js-typescript/classes/Image.html#derivativeFilter 'link on github io')
-
-:::caution
-This method works only with images.
-:::
+[🖼️ Image options and parameters of `derivative` method](https://image-js.github.io/image-js-typescript/classes/Image.html#derivativeFilter 'link on github io')
 
 Derivative filter is a special case of a gradient filter, therefore it uses gradient algorithm. However, the key difference are the kernels used in this very algorithm. In ImageJS there are three distinguished kernels: [Sobel](https://en.wikipedia.org/wiki/Sobel_operator 'wikipedia link on Sobel kernel'), [Scharr](https://en.wikipedia.org/wiki/Sobel_operator#Alternative_operators 'wikipedia link on Scharr operator') and [Prewitt](https://en.wikipedia.org/wiki/Prewitt_operator 'wikipedia link on Prewitt kernel').
 

docs/Features/Filters/Filters.md

@@ -2,28 +2,18 @@
 sidebar_position: 0
 ---
 
-# Filters
-
 [Image filters](https://en.wikipedia.org/wiki/Digital_image_processing#Filtering 'wikipedia link on image filtering') are techniques or algorithms applied to digital images in order to modify their appearance, enhance certain features, or extract specific information from them. Image filters work by altering the pixel values of an image based on predefined mathematical operations or transformations. These filters can be used for various purposes, such as artistic effects, noise reduction, image enhancement, edge detection, and more.
 
-### Methods that can be applied on Images only
-
-- [Grayscale](./Grayscale.md 'internal link on grayscale')
-
-- [Blur](./Blur.md 'internal link on blur')
-
-- [gaussianBlur](./Gaussian%20Blur.md 'internal link on gaussianBlur')
-
-- [Gradient](./Gradient.md 'internal link on gradient')
-
-- [Derivative](./Derivative.md 'internal link on derivative')
-
-- [Median](./Median.md 'internal link on median')
-
-- [level](./Level.md 'internal link on level')
-
-- [pixelate](./Pixelate.md 'internal link on pixelate')
-
-### Methods that can be applied on Images or Masks
-
-- [invert](./Invert.md 'internal link on invert')
+### Methods
+
+| Can be applied on                                                                | Images  | Masks    |
+| -------------------------------------------------------------------------------- | ------- | -------- |
+| [Invert(`add`)](./Invert.md 'internal link on invert')                           | ✅ | ✅  |
+| [Grayscale( `grey` )](./Grayscale.md 'internal link on grayscale')               | ✅ | ❌ |
+| [Gradient(`gradient` )](./Gradient.md 'internal link on gradient')               | ✅ | ❌ |
+| [Derivative(`derivative`)](./Derivative.md 'internal link on derivative')        | ✅ | ❌ |
+| [Median(`median`)](./Median.md 'internal link on median')                        | ✅ | ❌ |
+| [Pixelate(`pixelate`)](./Pixelate.md 'internal link on pixelate')                | ✅ | ❌ |
+| [Blur(`blur`)](./Blur.md 'internal link on blur')                                | ✅ | ❌ |
+| [Gaussian(`gaussianBlur`)](./Gaussian%20Blur.md 'internal link on gaussianBlur') | ✅ | ❌ |
+| [Level(`level`)](./Level.md 'internal link on level')                            | ✅ | ❌ |