Fixing .clear() after performance tunning

dist/index.js

@@ -117,11 +117,15 @@ window.ConfettiGenerator = function(params) {
   //////////////
   // Clean actual state
   var _clear = function() {
-    ctx.clearRect(0, 0, cv.width, cv.height);
-    var w = cv.width;
-    cv.width = 1;
-    cv.width = w;
+    appstate.animate = false;
     clearInterval(appstate.interval);
+
+    requestAnimationFrame(function() {
+    	ctx.clearRect(0, 0, cv.width, cv.height);
+      var w = cv.width;
+      cv.width = 1;
+      cv.width = w;
+    });
   }
 
   //////////////

index.html

@@ -56,6 +56,8 @@ <h2>Settings</h2>
             <div>
               <br />
               <input type="button" onclick="app.render()" id="btnRender" value="Render" />
+
+              <input type="button" onclick="app.clear()" id="btnClear" value="Clear" />
             </div>
           </form>
           <div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "confetti-js",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Easily Generate random confetti for your above-the-fold content",
   "main": "dist/index.js",
   "scripts": {

site/site.css

@@ -6,6 +6,9 @@ body {
   background-color: #fff;
   font-family: 'Lato', sans-serif;
 }
+body {
+  overflow-x: hidden;
+}
 div {
   box-sizing: border-box;
 }

site/site.js

@@ -75,8 +75,13 @@ var AppClass = function() {
     render();
   };
 
+  var clear = function() {
+    confetti.clear();
+  }
+
   return {
     start: start,
+    clear: clear,
     render: render
   };
 }