EaselJS - Drawing Lines

Playing with Draw lines - EaselJS (Canvas)

by Rishi Gautam

HTML

<script src="https://code.createjs.com/createjs-2013.09.25.min.js"></script>
<canvas id="testCanvas" width="800" height="400"></canvas>

CSS

#testCanvas {
  border: 1px solid #A93226;
  border-radius: 5px;
}

JavaScript

var canvas = document.getElementById("testCanvas");
var stage = new createjs.Stage(canvas);


function drawLine() {
  var line = new createjs.Shape();
  line.graphics.moveTo(200, 60).setStrokeStyle(5).beginStroke('#1D8348');
  line.graphics.lineTo(300, 60);
  line.graphics.lineTo(400, 7);
  line.graphics.lineTo(300, 120);
  line.graphics.lineTo(300, 60);
  line.graphics.lineTo(200, 60);
  line.graphics.lineTo(100, 7);
  line.graphics.lineTo(200, 120);
  line.graphics.lineTo(200, 60);
  line.graphics.lineTo(200, 120);
  line.graphics.lineTo(250, 180);
  line.graphics.lineTo(300, 120);
  line.graphics.endStroke();

  stage.addChild(line);
  stage.update();
}

drawLine();