@tsparticles/canvas-utils 4.0.0-beta.0 → 4.0.0-beta.10

package/README.md

@@ -8,6 +8,12 @@
 
 [tsParticles](https://github.com/tsparticles/tsparticles) canvas utils.
 
+## Quick checklist
+
+1. Install `@tsparticles/engine` (or use the CDN bundle below)
+2. Call the package loader function(s) before `tsParticles.load(...)`
+3. Apply the package options in your `tsParticles.load(...)` config
+
 ## How to use it
 
 ### CDN / Vanilla JS / jQuery
@@ -72,3 +78,14 @@ import { loadCanvasUtilsPath } from "@tsparticles/canvas-utils";
   await loadCanvasUtilsPath(tsParticles);
 })();
 ```
+
+## Common pitfalls
+
+- Calling `tsParticles.load(...)` before `loadCanvasUtilsPath(...)`
+- Verify required peer packages before enabling advanced options
+- Change one option group at a time to isolate regressions quickly
+
+## Related docs
+
+- All packages catalog: <https://github.com/tsparticles/tsparticles>
+- Main docs: <https://particles.js.org/docs/>

package/browser/Utils.js

@@ -1,5 +1,10 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -18,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -31,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/cjs/Utils.js

@@ -1,5 +1,10 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -18,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -31,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/esm/Utils.js

@@ -1,5 +1,10 @@
-import { defaultAlpha, defaultRgbMin, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
-const defaultWidth = 0;
+import { defaultAlpha, defaultRgbMin, identity, isNumber, originPoint, safeDocument, } from "@tsparticles/engine";
+const defaultWidth = 0, indexesOffset = {
+    r: 0,
+    g: 1,
+    b: 2,
+    a: 3,
+}, alphaMax = 255, alphaFactor = identity / alphaMax;
 export function drawLine(context, begin, end) {
     context.beginPath();
     context.moveTo(begin.x, begin.y);
@@ -18,12 +23,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             y: Math.floor(idx / size.width),
         };
         pixels[pos.y] ??= [];
-        const indexesOffset = {
-            r: 0,
-            g: 1,
-            b: 2,
-            a: 3,
-        }, alphaFactor = 255, row = pixels[pos.y];
+        const row = pixels[pos.y];
         if (!row) {
             continue;
         }
@@ -31,7 +31,7 @@ export function getCanvasImageData(ctx, size, offset, clear = true) {
             r: imageData[i + indexesOffset.r] ?? defaultRgbMin,
             g: imageData[i + indexesOffset.g] ?? defaultRgbMin,
             b: imageData[i + indexesOffset.b] ?? defaultRgbMin,
-            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) / alphaFactor,
+            a: (imageData[i + indexesOffset.a] ?? defaultAlpha) * alphaFactor,
         };
     }
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsparticles/canvas-utils",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.10",
   "description": "tsParticles canvas utils library",
   "homepage": "https://particles.js.org",
   "repository": {
@@ -97,13 +97,12 @@
       "browser": "./browser/index.js",
       "import": "./esm/index.js",
       "require": "./cjs/index.js",
-      "umd": "./umd/index.js",
-      "default": "./cjs/index.js"
+      "default": "./esm/index.js"
     },
     "./package.json": "./package.json"
   },
-  "dependencies": {
-    "@tsparticles/engine": "4.0.0-beta.0"
+  "peerDependencies": {
+    "@tsparticles/engine": "4.0.0-beta.10"
   },
   "type": "module"
 }