title: CreateJS - Can't Get Clicker or Ticker to Work How I Want
body: <p>I'm trying to design a menu page for a game using createJS, and I cannot get the button interaction to work properly. I've run into a couple of roadblocks, and I was hoping to get one or both of them resolved here.</p>
  
  <p>The first roadblock I've run into is with onclick:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://code.createjs.com/createjs-2015.11.26.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;     
        //declare button containers
        var p1_button;
        var p2_button;
        var p3_button;
        var p4_button;
        var start_button;
        var options_button;
  
        //initialize variables
        var incirclesr     = 40;
        var outcirclesr    = 50;
        var circlesy       = 150;
        var inrectw        = 280;
        var inrecth        = 30;
        var inrectangle1y  = 235;
        var inrectangle2y  = 310;
        var outrectangle1y = 225;
        var outrectangle2y = 300;
        var outrectanglesx = 150;
        var inrectanglesx  = 160;
        var outrectw       = 300;
        var outrecth       = 50;
        var circle_offset = 2 * (outcirclesr + 10)
  
        //declare shapes
        var stage;
        var outcircles;
        var outrectangles;
        var outcircle1;
        var outcircle2;
        var outcircle3;
        var outcircle4;
        var incircle1;
        var incircle2;
        var incircle3;
        var incircle4;
        var outrectangle1;
        var outrectangle2;
        var inrectangle1;
        var inrectangle2;
        var p_num;
        var p1;
        var p2;
        var p3;
        var p4;
        var start;
        var options;
        function init() {
          // Change canvas color to off-white
          canvas.style.backgroundColor = "#f5f5f5";
  
          //initialize stage
          stage         = new createjs.Stage("canvas");
  
          //initialize containers
          p1_button      = new createjs.Container();
          p2_button      = new createjs.Container();
          p3_button      = new createjs.Container();
          p4_button      = new createjs.Container();
          start_button   = new createjs.Container();
          options_button = new createjs.Container();
  
          //initialize shapes
          outcircles    = new createjs.Graphics().beginFill("#616161").drawCircle(0, circlesy, outcirclesr);
          outrectangles = new createjs.Graphics().beginFill("#616161").drawRect(outrectanglesx,0,outrectw,outrecth);
          outcircle1    = new createjs.Shape(outcircles);
          outcircle2    = new createjs.Shape(outcircles);
          outcircle3    = new createjs.Shape(outcircles);
          outcircle4    = new createjs.Shape(outcircles);
          incircle1     = new createjs.Shape();
          incircle2     = new createjs.Shape();
          incircle3     = new createjs.Shape();
          incircle4     = new createjs.Shape();
          outrectangle1 = new createjs.Shape(outrectangles);
          outrectangle2 = new createjs.Shape(outrectangles);
          inrectangle1  = new createjs.Shape();
          inrectangle2  = new createjs.Shape();
  
          //initialize text
          p_num   = new createjs.Text("Pick # of Players", "36px Arial", "#616161");
          p_num.maxWidth = 1000;
          p_num.textAlign = "center";
          p_num.textBaseline = "middle";
          p1      = new createjs.Text("1", "36px Arial", "#fafafa");
          p1.maxWidth = 1000;
          p1.textAlign = "center";
          p1.textBaseline = "middle";
          p2      = new createjs.Text("2", "36px Arial", "#fafafa");
          p2.maxWidth = 1000;
          p2.textAlign = "center";
          p2.textBaseline = "middle";
          p3      = new createjs.Text("3", "36px Arial", "#fafafa");
          p3.maxWidth = 1000;
          p3.textAlign = "center";
          p3.textBaseline = "middle";
          p4      = new createjs.Text("4", "36px Arial", "#fafafa");
          p4.maxWidth = 1000;
          p4.textAlign = "center";
          p4.textBaseline = "middle";
          start   = new createjs.Text("Start", "36px Arial", "#fafafa");
          start.maxWidth = 1000;
          start.textAlign = "center";
          start.textBaseline = "middle";
          options = new createjs.Text("Options", "36px Arial", "#fafafa");
          options.maxWidth = 1000;
          options.textAlign = "center";
          options.textBaseline = "middle";
  
          //draw remaining shapes
          incircle1.graphics.beginFill("#f50057").drawCircle(120, circlesy, incirclesr);
          incircle2.graphics.beginFill("#00b0ff").drawCircle(240, circlesy, incirclesr);
          incircle3.graphics.beginFill("#00e676").drawCircle(360, circlesy, incirclesr);
          incircle4.graphics.beginFill("#ff9100").drawCircle(480, circlesy, incirclesr);
          inrectangle1.graphics.beginFill("#f44336").drawRect(inrectanglesx, inrectangle1y, inrectw, inrecth);
          inrectangle2.graphics.beginFill("#d500f9").drawRect(inrectanglesx, inrectangle2y, inrectw, inrecth);
  
          //set remaining shape coords
          outcircle1.x = 120;
          outcircle2.x = 240;
          outcircle3.x = 360;
          outcircle4.x = 480;
          outrectangle1.y = outrectangle1y;
          outrectangle2.y = outrectangle2y;
  
          //set text coords
          p_num.x   = canvas.width / 2;
          p_num.y   = circlesy - 100;
          p1.x      = canvas.width/2 - (circle_offset + circle_offset / 2);
          p1.y      = circlesy;
          p2.x      = canvas.width/2 - (circle_offset / 2);
          p2.y      = circlesy;
          p3.x      = canvas.width/2 + (circle_offset / 2);;
          p3.y      = circlesy;
          p4.x      = canvas.width/2 + (circle_offset + circle_offset / 2);;
          p4.y      = circlesy;
          start.x   = canvas.width / 2;
          start.y   = inrectangle1y + outrecth / 4;
          options.x = canvas.width / 2;
          options.y = inrectangle2y + outrecth / 4;
  
          //add objects to containers/stage
          p1_button.addChildAt(outcircle1, incircle1, p1, 0);
          p2_button.addChildAt(outcircle2, incircle2, p2, 0);
          p3_button.addChildAt(outcircle3, incircle3, p3, 0);
          p4_button.addChildAt(outcircle4, incircle4, p4, 0);
          start_button.addChildAt(outrectangle1, inrectangle1, start, 0);
          options_button.addChildAt(outrectangle2, inrectangle2, options, 0);
          stage.addChildAt(p_num, p1_button, p2_button, p3_button, p4_button, start_button, options_button, 0);
          stage.update();
  
          canvas.onclick = start_game;
        }
  
        function start_game() {
          stage.removeAllChildren();
          stage.update();
          //start game here
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onLoad="init();"&gt;
      &lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This sets the stage like so...</p>
  
  <p><a href="https://i.stack.imgur.com/FEOzX.png" rel="nofollow noreferrer">Main Menu Screen</a></p>
  
  <p>If I set canvas.onclick to call start_game, like so...</p>
  
  <pre><code>canvas.onclick = start_game;
  </code></pre>
  
  <p>then it works, but if I want to make the start button do the same, like so...</p>
  
  <pre><code>start_button.onclick = start_game;
  </code></pre>
  
  <p>it doesn't work.</p>
  
  <p>My second roadblock is with listeners/tickers:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://code.createjs.com/createjs-2015.11.26.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;     
        //declare button containers
        var p1_button;
        var p2_button;
        var p3_button;
        var p4_button;
        var start_button;
        var options_button;
  
        //initialize variables
        var incirclesr     = 40;
        var outcirclesr    = 50;
        var circlesy       = 150;
        var inrectw        = 280;
        var inrecth        = 30;
        var inrectangle1y  = 235;
        var inrectangle2y  = 310;
        var outrectangle1y = 225;
        var outrectangle2y = 300;
        var outrectanglesx = 150;
        var inrectanglesx  = 160;
        var outrectw       = 300;
        var outrecth       = 50;
        var circle_offset = 2 * (outcirclesr + 10)
  
        //declare shapes
        var stage;
        var outcircles;
        var outrectangles;
        var outcircle1;
        var outcircle2;
        var outcircle3;
        var outcircle4;
        var incircle1;
        var incircle2;
        var incircle3;
        var incircle4;
        var outrectangle1;
        var outrectangle2;
        var inrectangle1;
        var inrectangle2;
        var p_num;
        var p1;
        var p2;
        var p3;
        var p4;
        var start;
        var options;
        function init() {
          // Change canvas color to off-white
          canvas.style.backgroundColor = "#f5f5f5";
  
          //initialize stage
          stage         = new createjs.Stage("canvas");
  
          //initialize containers
          p1_button      = new createjs.Container();
          p2_button      = new createjs.Container();
          p3_button      = new createjs.Container();
          p4_button      = new createjs.Container();
          start_button   = new createjs.Container();
          options_button = new createjs.Container();
  
          //initialize shapes
          outcircles    = new createjs.Graphics().beginFill("#616161").drawCircle(0, circlesy, outcirclesr);
          outrectangles = new createjs.Graphics().beginFill("#616161").drawRect(outrectanglesx,0,outrectw,outrecth);
          outcircle1    = new createjs.Shape(outcircles);
          outcircle2    = new createjs.Shape(outcircles);
          outcircle3    = new createjs.Shape(outcircles);
          outcircle4    = new createjs.Shape(outcircles);
          incircle1     = new createjs.Shape();
          incircle2     = new createjs.Shape();
          incircle3     = new createjs.Shape();
          incircle4     = new createjs.Shape();
          outrectangle1 = new createjs.Shape(outrectangles);
          outrectangle2 = new createjs.Shape(outrectangles);
          inrectangle1  = new createjs.Shape();
          inrectangle2  = new createjs.Shape();
  
          //initialize text
          p_num   = new createjs.Text("Pick # of Players", "36px Arial", "#616161");
          p_num.maxWidth = 1000;
          p_num.textAlign = "center";
          p_num.textBaseline = "middle";
          p1      = new createjs.Text("1", "36px Arial", "#fafafa");
          p1.maxWidth = 1000;
          p1.textAlign = "center";
          p1.textBaseline = "middle";
          p2      = new createjs.Text("2", "36px Arial", "#fafafa");
          p2.maxWidth = 1000;
          p2.textAlign = "center";
          p2.textBaseline = "middle";
          p3      = new createjs.Text("3", "36px Arial", "#fafafa");
          p3.maxWidth = 1000;
          p3.textAlign = "center";
          p3.textBaseline = "middle";
          p4      = new createjs.Text("4", "36px Arial", "#fafafa");
          p4.maxWidth = 1000;
          p4.textAlign = "center";
          p4.textBaseline = "middle";
          start   = new createjs.Text("Start", "36px Arial", "#fafafa");
          start.maxWidth = 1000;
          start.textAlign = "center";
          start.textBaseline = "middle";
          options = new createjs.Text("Options", "36px Arial", "#fafafa");
          options.maxWidth = 1000;
          options.textAlign = "center";
          options.textBaseline = "middle";
  
          //draw remaining shapes
          incircle1.graphics.beginFill("#f50057").drawCircle(120, circlesy, incirclesr);
          incircle2.graphics.beginFill("#00b0ff").drawCircle(240, circlesy, incirclesr);
          incircle3.graphics.beginFill("#00e676").drawCircle(360, circlesy, incirclesr);
          incircle4.graphics.beginFill("#ff9100").drawCircle(480, circlesy, incirclesr);
          inrectangle1.graphics.beginFill("#f44336").drawRect(inrectanglesx, inrectangle1y, inrectw, inrecth);
          inrectangle2.graphics.beginFill("#d500f9").drawRect(inrectanglesx, inrectangle2y, inrectw, inrecth);
  
          //set remaining shape coords
          outcircle1.x = 120;
          outcircle2.x = 240;
          outcircle3.x = 360;
          outcircle4.x = 480;
          outrectangle1.y = outrectangle1y;
          outrectangle2.y = outrectangle2y;
  
          //set text coords
          p_num.x   = canvas.width / 2;
          p_num.y   = circlesy - 100;
          p1.x      = canvas.width/2 - (circle_offset + circle_offset / 2);
          p1.y      = circlesy;
          p2.x      = canvas.width/2 - (circle_offset / 2);
          p2.y      = circlesy;
          p3.x      = canvas.width/2 + (circle_offset / 2);;
          p3.y      = circlesy;
          p4.x      = canvas.width/2 + (circle_offset + circle_offset / 2);;
          p4.y      = circlesy;
          start.x   = canvas.width / 2;
          start.y   = inrectangle1y + outrecth / 4;
          options.x = canvas.width / 2;
          options.y = inrectangle2y + outrecth / 4;
  
          //add objects to containers/stage
          p1_button.addChildAt(outcircle1, incircle1, p1, 0);
          p2_button.addChildAt(outcircle2, incircle2, p2, 0);
          p3_button.addChildAt(outcircle3, incircle3, p3, 0);
          p4_button.addChildAt(outcircle4, incircle4, p4, 0);
          start_button.addChildAt(outrectangle1, inrectangle1, start, 0);
          options_button.addChildAt(outrectangle2, inrectangle2, options, 0);
          stage.addChildAt(p_num, p1_button, p2_button, p3_button, p4_button, start_button, options_button, 0);
  
          Ticker.addListener(window);
        }
  
        function tick() {
          stage.update();
        }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onLoad="init();"&gt;
      &lt;canvas id="canvas" width="600" height="400"&gt;&lt;/canvas&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Pretty much every example I've seen has tickers set up something like this (with some sort of animation interaction added, of course), but when I use mine, the stage doesn't seem to update. All I get is the gray canvas.</p>
  
  <p>What am I doing wrong?</p>