CreateJS doesn't draw

I'm using createJS to draw my HTML5 canvas. Everything seems to work but the shape is not drawn. Below's the code:

$(document).ready(function(){

  var canvas, stage, line;
  canvas = document.getElementById('weigh');
  stage = new createjs.Stage(canvas);

  function drawLine(){
    line = new createjs.Shape();
    line.graphics.moveTo(5, 10).setStrokeStyle(1).beginStroke('#ff0000').lineTo(300, 10);
    stage.addChild(line);
  }

  drawLine();

  createjs.Ticker.on('tick', ticking);
  createjs.Ticker.setFPS(60);

  function ticking(event){
    line.rotation += 5;
    console.log('ticking');
  }

});

Here's the html:

<!DOCTYPE html>
<html>
<head>
  <title>Canvas</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.min.js"></script>
  <script type="text/javascript" src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <link rel="stylesheet" href="weigh.css" type="text/css">
  <script type="text/javascript" src="test.js"></script>
</head>
<body>
    <div id="canvas">
        <canvas id="weigh" width="382" height="382">alternate content</canvas>
    </div>
</body>
</html>

Everything is showing as expected. Console log is logging as expected. The only thing missing is the line that I draw and I can't find why. Can anyone point the mistake out?

Solution

It looks like you aren't updating your stage. Add an update call in your ticking method:

function ticking(event){
  line.rotation += 5;
  stage.update(event);
  console.log('ticking');
}

The stage update redraws the stage content. It doesn't happen automatically, and provides you the opportunity to control when the contents are redrawn since it can be an expensive call.

Cheers.