addbackground - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/backgrounds/bubbles.js

@@ -15,3 +15,3 @@ "use strict";
 exports.bubbles = function (_a) {
-    var canvas = _a.canvas, ctx = _a.ctx;
+    var canvas = _a.canvas, ctx = _a.ctx, primaryColor = _a.primaryColor;
     var particlesMax = 150;
@@ -32,4 +32,3 @@ var particlesChance = 0.1;
             t = 0;
-        ctx.fillStyle = 'rgba(255, 255, 255, 0.05)';
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = primaryColor;
         if (particles.length < particlesMax && Math.random() < particlesChance) {
@@ -36,0 +35,0 @@ particles.push({

lib/backgrounds/index.d.ts

 export interface RenderOptions {
     canvas: HTMLCanvasElement;
     ctx: CanvasRenderingContext2D;
+    primaryColor: string;
+    secondaryColor: string;
+    backgroundColor: string;
 }
@@ -5,0 +8,0 @@ export declare type RenderFunctionFactory = (options: RenderOptions) => () => void;

lib/backgrounds/ripples.js

@@ -15,7 +15,7 @@ "use strict";
 exports.ripples = function (_a) {
-    var canvas = _a.canvas, ctx = _a.ctx;
+    var canvas = _a.canvas, ctx = _a.ctx, primaryColor = _a.primaryColor;
     var particles = [];
     return function () {
         var e_1, _a;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillStyle = primaryColor;
         if (particles.length < 30 && Math.random() < 0.05) {
@@ -37,4 +37,3 @@ // Math.random all the things.
             }
-            ctx.fillStyle =
-                'rgba(255, 255, 255, ' + 0.05 * (1 - particle.r / particle.maxr) + ')';
+            ctx.globalAlpha = 1 - particle.r / particle.maxr;
             ctx.beginPath();
@@ -57,3 +56,4 @@ ctx.arc(particle.x, particle.y, particle.r, 0, 2 * Math.PI, false);
         }
+        ctx.globalAlpha = 1;
     };
 };

lib/index.d.ts

@@ -5,3 +5,11 @@ import { backgrounds } from './backgrounds';
     type: keyof typeof backgrounds;
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
 }
-export declare function addBackground({ canvas, type }: BackgroundOptions): void;
+export interface BackgroundControls {
+    isPlaying: boolean;
+    setIsPlaying: (value: boolean) => void;
+    stop: () => void;
+}
+export declare function addBackground({ canvas, type, primaryColor, secondaryColor, backgroundColor, }: BackgroundOptions): BackgroundControls;

lib/index.js

@@ -5,3 +5,3 @@ "use strict";
 function addBackground(_a) {
-    var canvas = _a.canvas, type = _a.type;
+    var canvas = _a.canvas, type = _a.type, _b = _a.primaryColor, primaryColor = _b === void 0 ? 'rgba(255, 255, 255, 0.05)' : _b, _c = _a.secondaryColor, secondaryColor = _c === void 0 ? 'rgba(0, 0, 0, 0.05)' : _c, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'transparent' : _d;
     if (!(type in backgrounds_1.backgrounds)) {
@@ -17,9 +17,44 @@ throw new Error('Unsupported background type.');
         ctx: ctx,
+        primaryColor: primaryColor,
+        secondaryColor: secondaryColor,
+        backgroundColor: backgroundColor,
     });
+    var playing = true;
+    var stopped = false;
     var frame = function () {
-        renderFunction();
+        if (stopped) {
+            ctx.fillStyle = 'transparent';
+            ctx.globalAlpha = 1;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            return;
+        }
+        if (playing) {
+            if (backgroundColor === 'transparent') {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+            }
+            else {
+                ctx.fillStyle = backgroundColor;
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+            }
+            renderFunction();
+        }
         requestAnimationFrame(frame);
     };
     requestAnimationFrame(frame);
+    return {
+        get isPlaying() {
+            return playing;
+        },
+        setIsPlaying: function (value) {
+            if (stopped) {
+                throw new Error('Animation was stopped.');
+            }
+            playing = value;
+        },
+        stop: function () {
+            playing = false;
+            stopped = true;
+        },
+    };
 }
 exports.addBackground = addBackground;

package.json

 {
   "name": "addbackground",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Beautiful canvas backgrounds made easy.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -38,13 +38,30 @@ <h1 align="center">addbackground</h1>
 
-addBackground is the main function that adds a background to the selected canvas and keeps rendering it. Currently there is no way to stop or pause the rendering.
+addBackground is the main function that adds a background to the selected canvas and keeps rendering it.
 
-It accepts one argument of type BackgroundOptions.
+It accepts one argument of type `BackgroundOptions` and returns an instance of `BackgroundControls`.
 
 ### BackgroundOptions
 
-BackgroundOptions has the following properties:
+BackgroundOptions is an object that has the following properties:
 
-| Property | Default value | Description                                                               |
-| -------- | ------------- | ------------------------------------------------------------------------- |
-| canvas   | `undefined`   | Canvas element to render to. **(required)**                               |
-| type     | `undefined`   | Background type, currently: either 'ripples' or 'bubbles'. **(required)** |
+| Property        | Default value               | Description                                                                                                     |
+| --------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| canvas          | `undefined`                 | Canvas element to render to. **(required)**                                                                     |
+| type            | `undefined`                 | Background type, currently: either 'ripples' or 'bubbles'. **(required)**                                       |
+| primaryColor    | `rgba(255, 255, 255, 0.05)` | Primary color, accepts a [CSS <color> value.](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).    |
+| secondaryColor  | `rgba(0, 0, 0, 0.05)`       | Secondary color, accepts a [CSS <color> value.](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value).  |
+| backgroundColor | `transparent`               | Background color, accepts a [CSS <color> value.](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). |
+
+### BackgroundControls
+
+#### isPlaying: boolean
+
+Returns the playback state of the animation.
+
+#### setIsPlaying: (value: boolean) => void
+
+Sets the playback state of the animation.
+
+#### stop: () => void
+
+Disassembles the animation, clears the canvas. Further playback is impossible after this function is called.

No alert changes

Improved metrics

Total package byte prevSize

14749

increased by21.89%

Lines of code

269

increased by20.09%

Number of lines in readme file

67

increased by34%

No dependency changes