Search code examples
javascripthtmlcanvascreatejs

How can I draw a line with easeljs-0.8.0.js?(createJs)

guys. I use easeljs-0.8.0.js to draw a line, but it doesn't work, can you help me?

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="lib/easeljs-0.8.0.js"></script>
</head>
<body>
<canvas id="demoCanvas" width="1200" height="600"></canvas>
</body>
<script>
window.onload = function() {
    var canvas = document.getElementById("demoCanvas");
    var stage = new createjs.Stage(canvas);
    var lineShape = new createjs.Shape();
    lineShape.graphics.moveTo(10,10).setStrokeStyle(1).beginStroke("#ff0000").lineTo(50,50);
    stage.addChild(lineShape);
    stage.update();
}
</script>
</html>

I can't draw a line with the code above!!!

Solution

  • In 0.8.0 the Graphics engine was rewritten, and you now need to call moveTo after beginStroke, beginFill, or beginStrokeStyle, as these methods "reset" the path.

    See: https://github.com/CreateJS/EaselJS/issues/520