diff --git a/examples/basic/src/index.ts b/examples/basic/src/index.ts
index fc9dd0f..b3f9046 100644
--- a/examples/basic/src/index.ts
+++ b/examples/basic/src/index.ts
@@ -4,27 +4,23 @@ import './style.css'
 
 const app = document.querySelector<HTMLDivElement>('#app')!
 const fireworks = new Fireworks(app, {
-  autoresize: true,
+  autoresize: false,
+  particles: 20,
   boundaries: {
+    debug: true,
+    x: 50,
+    y: 50,
     width: app.clientWidth,
     height: app.clientHeight
   }
 })
 
-// const resizeObserver = new ResizeObserver((entries) => {
-//   console.log(entries)
-// })
-
-// resizeObserver.observe(app)
-
 fireworks.start()
 
 const start = el(
   'button',
   {
-    onclick: () => {
-      fireworks.start()
-    }
+    onclick: () => fireworks.start()
   },
   'Start'
 )
@@ -32,19 +28,31 @@ const start = el(
 const stop = el(
   'button',
   {
-    onclick: () => {
-      fireworks.waitStop()
-    }
+    onclick: () => fireworks.waitStop()
   },
   'Stop'
 )
 
+const autoresize = el(
+  'button',
+  {
+    onclick: () => toggleAutoresize()
+  },
+  `Autoresize: ${fireworks.currentOptions.autoresize}`
+)
+
+function toggleAutoresize() {
+  const autoresizeValue = !fireworks.currentOptions.autoresize
+  fireworks.updateOptions({ autoresize: autoresizeValue })
+  autoresize.textContent = `Autoresize: ${autoresizeValue}`
+  fireworks.stop()
+  fireworks.start()
+}
+
 const launch = el(
   'button',
   {
-    onclick: () => {
-      fireworks.launch(Number(count.value))
-    }
+    onclick: () => fireworks.launch(Number(count.value))
   },
   'Launch'
 )
@@ -71,6 +79,7 @@ const buttons = el(
   },
   start,
   stop,
+  autoresize,
   launch,
   count
 )
diff --git a/packages/fireworks-js/src/fireworks.ts b/packages/fireworks-js/src/fireworks.ts
index 7f52014..5dcfe6a 100644
--- a/packages/fireworks-js/src/fireworks.ts
+++ b/packages/fireworks-js/src/fireworks.ts
@@ -149,11 +149,13 @@ export class Fireworks {
     this.canvas.width = width
     this.canvas.height = height
 
-    this.updateBoundaries({
-      ...this.opts.boundaries,
-      width,
-      height
-    })
+    if (this.opts.autoresize) {
+      this.updateBoundaries({
+        ...this.opts.boundaries,
+        width,
+        height
+      })
+    }
   }
 
   updateBoundaries(boundaries: Partial<FireworksTypes.Boundaries>): void {
@@ -176,6 +178,17 @@ export class Fireworks {
     this.updateSize()
   }
 
+  private drawBoundaries(): void {
+    const { boundaries } = this.opts
+    this.ctx.strokeStyle = 'red'
+    this.ctx.strokeRect(
+      boundaries.x,
+      boundaries.y,
+      boundaries.width - boundaries.x * 2,
+      boundaries.height - boundaries.y * 2
+    )
+  }
+
   private render(): void {
     if (!this.ctx || !this.running) return
 
@@ -188,6 +201,10 @@ export class Fireworks {
     this.ctx.lineJoin = 'round'
     this.ctx.lineWidth = randomFloat(lineWidth.trace.min, lineWidth.trace.max)
 
+    if (this.opts.boundaries.debug) {
+      this.drawBoundaries()
+    }
+
     this.initTrace()
     this.drawTrace()
     this.drawExplosion()
@@ -215,7 +232,7 @@ export class Fireworks {
         dy:
           (this.mouse.y && mouse.move) || this.mouse.active
             ? this.mouse.y
-            : randomInt(boundaries.y, boundaries.height * 0.5),
+            : randomInt(boundaries.y, boundaries.height - boundaries.y * 2),
         ctx: this.ctx,
         hue: randomInt(hue.min, hue.max),
         speed: traceSpeed,