Adding prop size and canvas size option

dist/index.js

@@ -4,11 +4,14 @@ window.ConfettiGenerator = function(params) {
   var appstate = {
     target: 'confetti-holder', // Id of the canvas
     max: 80, // Max itens to render
+    size: 1, // prop size
     animate: true, // Should aniamte?
     props: ['circle', 'square', 'triangle', 'line'], // Types of confetti
     colors: [[165,104,246],[230,61,135],[0,199,228],[253,214,126]], // Colors to render confetti
     clock: 25, // Speed of confetti fall
-    interval: null // Draw interval holder
+    interval: null, // Draw interval holder
+    width: window.innerWidth, // canvas width (as int, in px)
+    height: window.innerHeight // canvas height (as int, in px)
   };
 
   //////////////
@@ -18,6 +21,8 @@ window.ConfettiGenerator = function(params) {
       appstate.target = params.target;
     if(params.max)
       appstate.max = params.max;
+    if(params.size)
+      appstate.size = params.size;
     if(params.animate !== undefined && params.animate !== null)
       appstate.animate = params.animate;
     if(params.props)
@@ -26,14 +31,16 @@ window.ConfettiGenerator = function(params) {
       appstate.colors = params.colors;
     if(params.clock)
       appstate.clock = params.clock;
+    if(params.width)
+      appstate.width = params.width;
+    if(params.height)
+      appstate.height = params.height;
   }
 
   //////////////
   // Properties
   var cv = document.getElementById(appstate.target);
   var ctx = cv.getContext("2d");
-  var globalWidth = window.innerWidth;
-  var globalHeight = window.innerHeight;
   var particles = [];
 
   //////////////
@@ -49,8 +56,8 @@ window.ConfettiGenerator = function(params) {
   function particleFactory() {
     var p = {
       prop: appstate.props[rand(appstate.props.length, true)], //prop type
-      x: rand(globalWidth), //x-coordinate
-      y: rand(globalHeight), //y-coordinate
+      x: rand(appstate.width), //x-coordinate
+      y: rand(appstate.height), //y-coordinate
       radius: rand(4) + 1, //radius
       line: Math.floor(rand(65) - 30), // line angle
       angles: [rand(10, true) + 2, rand(10, true) + 2, rand(10, true) + 2, rand(10, true) + 2], // triangle drawing angles
@@ -73,30 +80,30 @@ window.ConfettiGenerator = function(params) {
     switch(p.prop) {
       case 'circle':{
         ctx.moveTo(p.x, p.y);
-        ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
+        ctx.arc(p.x, p.y, p.radius * appstate.size, 0, Math.PI * 2, true);
         ctx.fill();
         break;  
       }
       case 'triangle': {
         ctx.moveTo(p.x, p.y);
-        ctx.lineTo(p.x + (p.angles[0]), p.y + (p.angles[1]));
-        ctx.lineTo(p.x + (p.angles[2]), p.y + (p.angles[3]));
+        ctx.lineTo(p.x + (p.angles[0] * appstate.size), p.y + (p.angles[1] * appstate.size));
+        ctx.lineTo(p.x + (p.angles[2] * appstate.size), p.y + (p.angles[3] * appstate.size));
         ctx.closePath();
         ctx.fill();
         break;
       }
       case 'line':{
         ctx.moveTo(p.x, p.y);
-        ctx.lineTo(p.x + p.line, p.y + (p.radius * 5));
-        ctx.lineWidth = 2;
+        ctx.lineTo(p.x + (p.line * appstate.size), p.y + (p.radius * 5));
+        ctx.lineWidth = 2 * appstate.size;
         ctx.stroke();
         break;
       }
       case 'square': {
         ctx.save();
         ctx.translate(p.x+15, p.y+5);
         ctx.rotate(p.rotation);
-        ctx.fillRect(-15,-5,15,5);
+        ctx.fillRect(-15 * appstate.size,-5 * appstate.size,15 * appstate.size,5 * appstate.size);
         ctx.restore();
         break;
       }
@@ -121,15 +128,15 @@ window.ConfettiGenerator = function(params) {
   // Render confetti on canvas
   var _render = function() {
       //canvas dimensions
-      cv.width = globalWidth;
-      cv.height = globalHeight;
+      cv.width = appstate.width;
+      cv.height = appstate.height;
       particles = [];
 
       for(var i = 0; i < appstate.max; i ++)
         particles.push(particleFactory());
 
       function draw(){
-        ctx.clearRect(0, 0, globalWidth, globalHeight);
+        ctx.clearRect(0, 0, appstate.width, appstate.height);
 
         for(var i in particles)
           particleDraw(particles[i]);
@@ -144,9 +151,9 @@ window.ConfettiGenerator = function(params) {
           if(appstate.animate)
             p.y += p.speed;
 
-          if (p.y > globalHeight) {
+          if (p.y > appstate.height) {
             particles[i] = p; 
-            particles[i].x = rand(globalWidth, true);
+            particles[i].x = rand(appstate.width, true);
             particles[i].y = -10;
           }
         }

index.html

@@ -37,7 +37,19 @@ <h2>Settings</h2>
             <div>
                 <label>Clock</label>
                 <input type="text" id="clock" value="" />
-              </div>
+            </div>
+            <div>
+                <label>Prop size</label>
+                <input type="number" id="size" value="" />
+            </div>
+            <div>
+              <label>Canvas Width (defaults is window width)</label>
+              <input type="number" id="width" value="" />
+            </div>
+            <div>
+              <label>Canvas Height (defaults is window height)</label>
+              <input type="number" id="height" value="" />
+            </div>
             <div>
               <div><input type="checkbox" id="animate" value="animate" /><label for="animate">Animate</label></div>
             </div>

package.json

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

site/site.js

@@ -2,10 +2,13 @@ var AppClass = function() {
   var appstate = {
     target: 'confetti-holder',
     max: 80,
+    size: 1,
     animate: true,
     props: ['circle', 'square', 'triangle', 'line'],
     colors: [[165,104,246],[230,61,135],[0,199,228],[253,214,126]],
-    clock: 25
+    clock: 25,
+    width: window.innerWidth,
+    height: window.innerHeight
   };
 
   var confetti = null;
@@ -15,6 +18,9 @@ var AppClass = function() {
     document.getElementById('canvas-id').value = appstate.target;
     document.getElementById('max-confetti').value = appstate.max;
     document.getElementById('clock').value = appstate.clock;
+    document.getElementById('size').value = appstate.size;
+    document.getElementById('width').value = appstate.width;
+    document.getElementById('height').value = appstate.height;
 
     document.getElementById('circle').checked = appstate.props.indexOf('circle') > -1;
     document.getElementById('square').checked = appstate.props.indexOf('square') > -1;
@@ -33,6 +39,9 @@ var AppClass = function() {
     appstate.target = document.getElementById('canvas-id').value;
     appstate.max = document.getElementById('max-confetti').value;
     appstate.clock = document.getElementById('clock').value;
+    appstate.size = document.getElementById('size').value;
+    appstate.width = document.getElementById('width').value;
+    appstate.height = document.getElementById('height').value;
 
     appstate.props = [];
     if(document.getElementById('circle').checked)