add comments

src/App.svelte

@@ -9,6 +9,11 @@
     image.src = 'images/sea.jpg';
 
     image.onload = async () => {
+      /**
+       * ImageBitmaps can be transferred between different contexts (e.g., between the main thread and web workers)
+       * without copying the image data, which saves memory and improves performance.
+       * Also the trendering process is quicker compared to directly using other image objects like HTMLImageElement.
+       */
       const imageBitmap = await createImageBitmap(image);
       imageSource = imageBitmap;
     };

src/model/createHitCanvas.ts

@@ -2,7 +2,7 @@ import { type HEX, type HitCanvasRenderingContext2D } from '.';
 import { pickColor } from '../lib';
 
 /**
- * Offscreen canvas settings for rendering optimization
+ * Offscreen canvas settings for rendering optimization.
  */
 const settings: CanvasRenderingContext2DSettings = {
   willReadFrequently: true,
@@ -19,7 +19,8 @@ const EXCLUDED_SETTERS: Array<keyof HitCanvasRenderingContext2D> = [
 /**
  * Under the hood, we proxy all CanvasRenderingContext2D methods to a second, offscreen canvas.
  * When an event occurs on the main canvas, the color of the pixel at the event coordinates is read from the offscreen canvas and converted to HEX color code.
- * This approach can also be useful for identifying the corresponding layer using a unique fill and stroke color and then re-dispatch an event to the Layer component.
+ * Multiple layered canvases for complex scenes is a possible optimization when some objects need to move or change frequently, while others remain relatively static.
+ * Also, this approach can be useful for identifying the corresponding layer using a unique fill and stroke color and then re-dispatch an event to the Layer component.
  */
 export function createHitCanvas(
   canvas: HTMLCanvasElement,

src/model/worker.ts

@@ -13,7 +13,7 @@ let frame: number | null = null;
 let needsRedraw = true;
 
 /**
- * Offscreen canvas settings for rendering optimization
+ * Offscreen canvas settings for rendering optimization.
  */
 const settings: CanvasRenderingContext2DSettings = {
   willReadFrequently: true,

src/ui/ColorDropper.svelte

@@ -8,11 +8,26 @@
   import { RenderManager, RenderWorker, type AppContext, GeometryManager } from '../model';
   import { KEY } from '../lib';
 
+  /**
+   * When unset, the canvas will use its clientWidth property.
+   */
   export let width: number | null = null;
+  /**
+   * When unset, the canvas will use its clientHeight property.
+   */
   export let height: number | null = null;
+  /**
+   * If pixelRatio is unset, the canvas uses devicePixelRatio binding to match the window’s pixel dens.
+   * If pixelRatio is set to "auto", the canvas-size library is used to automatically calculate the maximum supported pixel ratio based on the browser and canvas size.
+   * This can be particularly useful when rendering large canvases on iOS Safari (https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/)
+   */
   export let pixelRatio: 'auto' | number | null = null;
   export let contextSettings: CanvasRenderingContext2DSettings | undefined = undefined;
   export let style = '';
+  /**
+   * When useWorker is true, a worker with offscreen canvas will be registered to perform intensive operations without blocking the main thread.
+   * When useWorker is false, all operations will be performed in the main thread on the main canvas.
+   */
   export let useWorker = false;
 
   const geometryManager = new GeometryManager();