How to draw a line from first mouseclick to second with easel.js

Question

I tried to create eventlisteners drawing to a stage.mouseY stage.MouseX coordinates, but no matter where I click the line is the exact same straight down the middle.

Here's my code

   Ext.onReady( function(){
  var g;




  canvas = document.getElementById('Canvas');
  var stage = new createjs.Stage(canvas);

function draw(a){
var mousex = stage.mouseX;
var mousey = stage.mouseY;
a.lineTo(mousex, mousey);
}

g = new createjs.Graphics();

g.setStrokeStyle(1);
g.beginStroke(createjs.Graphics.getRGB(0,0,0));
g.beginFill(createjs.Graphics.getRGB(255,0,0));
stage.addEventListener('click', draw(g));
g.lineTo(0,50);

var s = new createjs.Shape(g);
    s.x = 100;
    s.y = 100;

stage.addChild(s);
stage.update();


});

My long term goal is to create user created polygons that are selectable/highlightable is this a way to do it?

Answer 1

This is where your problem is:

stage.addEventListener('click', draw(g));

It will immediately execute the draw function with parameter g. It won't wait for the click. The problem is that with parentheses following the function name, the function will be executed immediately. What you need is to have a function reference to the draw function. You can have that by using an anonymous function

stage.addEventListener('click', function() {draw(g); });