javascript - Canvas onClick add to array -

i got html5 canvas project i'm struggling with. i'm trying add new particle on click. , particles pushed particles array, particle not show. can see particle pushed array mouse coordinates, doesn't seem last particle drawn. doing wrong?

see example.

// request animation frame  var requestanimationframe = window.requestanimationframe ||          window.mozrequestanimationframe ||          window.webkitrequestanimationframe ||          window.msrequestanimationframe;    // canvas  var canvas = document.getelementbyid('canvas');  var ctx = canvas.getcontext('2d');    // set full-screen  canvas.width = window.innerwidth;  canvas.height = window.innerheight;    // options  var num = 100;              // number of particles draw  var size = 2;               // particle size  var color = '#dd64e6';      // particle color  var min_speed = .3;         // particle min speed  var max_speed = 2;          // particle max speed  var dist = 100; 		    // max distance before line gets cut  var dist_sq = dist * dist;  // dist squared  var line_width = 2;         // line width  var background = '#181b23'; // background color  var line_color = '#1d2631'; // line color  var fps = 60;  var now, delta;  var = date.now();  var interval = 1000 / fps;    if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.useragent)) {      num = 10;      fps = 29;  }    // particles array  var particles = [];  (var = 0; < num; i++) {      particles.push(          new create_particle(false, false)      );  }    // lets animate particle  function draw() {        // loop      requestanimationframe(draw);        = date.now();      delta = - then;        if (delta > interval) {            = - (delta % interval);            // background          ctx.fillstyle = background;          ctx.fillrect(0, 0, canvas.width, canvas.height);            // lets draw particles array          draw_particles();        }    }    // draw particles  function draw_particles() {        (var t = 0; t < num; t++) {            // particle          var p = particles[t];            (var q = t + 1; q < num; q++) {                // check x first, maybe don't need              // calculate y              var x = particles[q].x - p.x;              if ((x *= x) < dist_sq) {                    // check passed, calculate y                  var y = particles[q].y - p.y;                  if (x + (y * y) < dist_sq) {                        // check passed, draw line                      draw_line(p.x, p.y, particles[q].x, particles[q].y);                    }                }            }            // color          ctx.fillstyle = color;            // circle path          ctx.beginpath();          ctx.arc(p.x, p.y, p.radius, math.pi * 2, false);          ctx.fill();            // lets use velocity          p.x += p.vx;          p.y += p.vy;            // if there 1 particle          // show x, y, , velocity          if (num === 1) {              ctx.filltext('y:' + p.y, 20, 20);              ctx.filltext('x:' + p.x, 20, 40);              ctx.filltext('yv:' + p.vy, 20, 60);              ctx.filltext('xv:' + p.vx, 20, 80);          }            // prevent balls moving out of canvas          if (p.x < size) p.vx *= (p.vx / -p.vx);          if (p.y < size) p.vy *= (p.vy / -p.vy);          if (p.x > canvas.width - size) p.vx *= (-p.vx / p.vx);          if (p.y > canvas.height - size) p.vy *= (-p.vy / p.vy);        }    }    // return particle object  function create_particle(xpos, ypos) {        // position      if (xpos == false && ypos == false) {          this.x = math.random() * canvas.width;          this.y = math.random() * canvas.height;      } else {          this.x = xpos;          this.y = ypos;      }        // velocity      this.vx = random_int_between(min_speed, max_speed);      this.vy = random_int_between(min_speed, max_speed);        // size      this.radius = size;        console.log('particle created at: ' + this.x + ', ' + this.y);    }    // returns random integer, positive or negative  // between given value  function random_int_between(min, max) {        var num = math.floor(math.random() * max) - min;      num *= math.floor(math.random() * 2) == 1 ? 1 : -1;      return num;    }    // draw line between 2 particles  // given particles x , y position  function draw_line(p_x, p_y, p2_x, p2_y) {        ctx.beginpath();      ctx.linewidth = line_width;      ctx.strokestyle = line_color;      ctx.moveto(p_x, p_y);      ctx.lineto(p2_x, p2_y);      ctx.stroke();    }    // when canvas clicked  // add new particle  function clicked(e) {        var mousexpos, mouseypos;        if (e.offsetx) {          mousexpos = e.offsetx;          mouseypos = e.offsety;      } else if (e.layerx) {          mousexpos = e.layerx;          mouseypos = e.layery;      }        particles.push(          new create_particle(mousexpos, mouseypos)      );    }    canvas.addeventlistener('click', function(e) {      clicked(e);  }, false);    draw();

<!doctype html>    <html>    	<head>  		<style>  		* {margin:0;padding:0;overflow:hidden;}  		</style>  	</head>        <body>            <canvas id="canvas">{{-- background --}}</canvas>        </body>    </html>