How to draw a line using CreateJS (EaselJS)

I'm embarking on another JavaScript game development journey. The last time I did this was a few years ago and I was learning about Cocos2d-X HTML5. After looking at the current state of HTML5 development libraries I decided to try using Easel.js as it seems to be pretty popular and should have some staying power.

Everything seemed simple enough until I needed to draw a straight line: I was unable to get the line to show up on the canvas! After googling around I found a lot of potential answers which did not work for me. In this article I'll give you the quickest path to draw a line with EaselJS v0.7.1 (current release at the time of this writing)

References

• Using CreateJS - EaselJS [code.tutsplus.com]
• Specifically search for the Hangman example (It actually worked)
    
• JSFiddle - EaselJS draw sample [jsfiddle.com]
• While this works in jsfiddle, I was unable to get the line drawing function to work correctly
    
• EaselJS - Graphics_simple.html example [github.com/CreateJS/EaselJS]
• I tried following the 'drawSmiley()' method without luck

What worked for me

I found the quickest way to get a line to draw was like this:

(I'd include the full html page, but my prettyprint plugin doesn't like HTML :/ )

        function init() {
            // Create a stage from the canvas tag below
            var stage = new createjs.Stage("demoCanvas");

            /*
             * Create a crazy line that goes to multiple points
             */

            // Get a new 'shape' which comes with a 'graphics' property that allows us to draw
            var line = new createjs.Shape();

            // Add this line shape to the canvas
            stage.addChild(line);

            // Set the 'brush stroke' style (basically the thickness of the line)
            //      Then start drawing a black line
            line.graphics.setStrokeStyle(1).beginStroke("rgba(0,0,0,1)");

            // Tell EaselJS where to go to start drawing the line
            line.graphics.moveTo(120, 305);

            // Tell EaselJS where to draw the line to
            line.graphics.lineTo(280, 305);

            // Draw another line to a new point
            line.graphics.lineTo(180, 96);

            // Do that again for good measure (and to get a crazy looking thing on screen
            line.graphics.lineTo(96, 180);

            // Stop drawing this line
            line.graphics.endStroke();

            /*
             * Create a simple line that goes between 2 points
             */

            // Get another 'line shape' object (really just a shape we'll use to draw a line
            var line2 = new createjs.Shape();

            // Add the line shape to the canvas
            stage.addChild(line2);

            // Tell EaselJs that we want a thin like (1px) with a black color
            line2.graphics.setStrokeStyle(1).beginStroke("#000000");

            // Point EaselJS to the place where we want to start drawing
            line2.graphics.moveTo(70,10);

            // Tell EaselJS to draw a line to a different point
            line2.graphics.lineTo(10,50);

            // Stop drawing this line
            line2.graphics.endStroke();

            //
            // Update the canvas to reflect the changes
            //      Note:: This is very important: without the '.update()' call you will only see white
            //
            stage.update();
        }

Download

Since the pretty-printer can only show so much, here is a downloadable archive (PhpStorm project) that you can use to view the HTML and JS as part of a complete solution:

EaselJSTest.zip