diff --git a/.npmignore b/.npmignore
index 54fa5f5..6a10474 100755
--- a/.npmignore
+++ b/.npmignore
@@ -3,6 +3,7 @@ docs/
 node_modules/
 example/
 examples/
+images/
 .*.swp
 .DS_Store
 .git
diff --git a/README.md b/README.md
index 9c4dfb4..eac3629 100755
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@
 ### Check it out if you want to use it in `React` [https://github.com/lindelof/particles-bg](https://github.com/lindelof/particles-bg)
 
 ## Specify
-This project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14&module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. You can use it casually in your own projects
+This project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14&module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. Thanks to the great author.
 
 ### Online demo
 * demo1 [https://codesandbox.io/s/particles-bg-vue-bg145](https://codesandbox.io/s/particles-bg-vue-bg145)
@@ -138,6 +138,11 @@ You can use type="custom" to achieve a higher degree of freedom for the particle
   }
 ```
 
+## Similar projects
+Maybe you will like these two projects, they will also make your page flourish
+* [https://github.com/lindelof/react-mouse-particles](https://github.com/lindelof/react-mouse-particles)
+* [https://github.com/lindelof/power-mode-input](https://github.com/lindelof/power-mode-input)
+
 ## License
 
 https://opensource.org/licenses/MIT
diff --git a/package.json b/package.json
index b5e86f5..be6fded 100755
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
   "name": "particles-bg-vue",
-  "version": "1.3.1",
+  "version": "1.3.5",
   "description": "Vue.js component for particles backgrounds",
-  "author": "creotip@gmail.com",
+  "author": "phragmen@protonmail.com",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/lindelof/particles-bg-vue/issues"
diff --git a/src/particles-bg/particles/BallParticles.vue b/src/particles-bg/particles/BallParticles.vue
index 6c80d12..dc82f9c 100755
--- a/src/particles-bg/particles/BallParticles.vue
+++ b/src/particles-bg/particles/BallParticles.vue
@@ -161,7 +161,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/CanvasComp.vue b/src/particles-bg/particles/CanvasComp.vue
index b561745..baf80f2 100755
--- a/src/particles-bg/particles/CanvasComp.vue
+++ b/src/particles-bg/particles/CanvasComp.vue
@@ -27,8 +27,8 @@ export default {
   methods: {
     initCanvas: function() {
       const canvas = this.$refs.canvasRef;
-      const width = window.innerWidth;
-      const height = window.innerHeight;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
       canvas.width = width;
       canvas.height = height;
 
@@ -41,8 +41,8 @@ export default {
     },
     resize: function() {
       const canvas = this.$refs.canvasRef;
-      const width = window.innerWidth;
-      const height = window.innerHeight;
+      const width = canvas.clientWidth;
+      const height = canvas.clientHeight;
       canvas.width = width;
       canvas.height = height;
       this.$emit("canvasResize", { width, height });
@@ -75,7 +75,7 @@ export default {
     this.resize = this.resize.bind(this);
     window.addEventListener("resize", this.resize);
   },
-  beforeDestory() {
+  beforeDestroy() {
     window.removeEventListener("resize", this.resize);
   }
 };
diff --git a/src/particles-bg/particles/CircleParticles.vue b/src/particles-bg/particles/CircleParticles.vue
index d0a29d9..e7db39b 100755
--- a/src/particles-bg/particles/CircleParticles.vue
+++ b/src/particles-bg/particles/CircleParticles.vue
@@ -102,7 +102,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/CobwebParticles.vue b/src/particles-bg/particles/CobwebParticles.vue
index 0067c44..509bff9 100755
--- a/src/particles-bg/particles/CobwebParticles.vue
+++ b/src/particles-bg/particles/CobwebParticles.vue
@@ -112,7 +112,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/ColorParticles.vue b/src/particles-bg/particles/ColorParticles.vue
index 8abd222..6279ee7 100755
--- a/src/particles-bg/particles/ColorParticles.vue
+++ b/src/particles-bg/particles/ColorParticles.vue
@@ -80,7 +80,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/CustomParticles.vue b/src/particles-bg/particles/CustomParticles.vue
index 1b712a7..55f22ff 100755
--- a/src/particles-bg/particles/CustomParticles.vue
+++ b/src/particles-bg/particles/CustomParticles.vue
@@ -209,7 +209,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/FountainParticles.vue b/src/particles-bg/particles/FountainParticles.vue
index 34f4edb..099b844 100755
--- a/src/particles-bg/particles/FountainParticles.vue
+++ b/src/particles-bg/particles/FountainParticles.vue
@@ -104,7 +104,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/LinesParticles.vue b/src/particles-bg/particles/LinesParticles.vue
index 78e7f02..8289432 100755
--- a/src/particles-bg/particles/LinesParticles.vue
+++ b/src/particles-bg/particles/LinesParticles.vue
@@ -105,7 +105,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/PolygonParticles.vue b/src/particles-bg/particles/PolygonParticles.vue
index 91d2bbf..42e6250 100755
--- a/src/particles-bg/particles/PolygonParticles.vue
+++ b/src/particles-bg/particles/PolygonParticles.vue
@@ -222,7 +222,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/SquareParticles.vue b/src/particles-bg/particles/SquareParticles.vue
index 151512f..d8d0cf7 100755
--- a/src/particles-bg/particles/SquareParticles.vue
+++ b/src/particles-bg/particles/SquareParticles.vue
@@ -131,7 +131,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/TadpoleParticles.vue b/src/particles-bg/particles/TadpoleParticles.vue
index a2c665b..edf441e 100755
--- a/src/particles-bg/particles/TadpoleParticles.vue
+++ b/src/particles-bg/particles/TadpoleParticles.vue
@@ -171,7 +171,7 @@ export default {
       this.proton && this.proton.update();
     }
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);
diff --git a/src/particles-bg/particles/ThickParticles.vue b/src/particles-bg/particles/ThickParticles.vue
index 5396d18..12d2e09 100755
--- a/src/particles-bg/particles/ThickParticles.vue
+++ b/src/particles-bg/particles/ThickParticles.vue
@@ -155,7 +155,7 @@ export default {
     this.colorTemplate = `hsla(hue,80%,50%, 0.75)`;
     this.renderProton = this.renderProton.bind(this);
   },
-  beforeDestory() {
+  beforeDestroy() {
     try {
       this.proton.destroy();
       RAFManager.remove(this.renderProton);