Drawing A Line In A Html5 Canvas Using Easeljs

I am very new to Easel and HTML5 itself. I am trying to draw a line using on a canvas using EaselJS. The X- Co ordinate is fixedd to 100 and the Y-Co ordinate is got from a array l

Solution 1:

There are a few issues here. The error you are seeing is because you are adding the Graphics to the Stage, and not the Shape.

The other issue is how the Graphics are modified in the tick:

this.tick = function() {
    graphics.moveTo(100,(dataList[this.index].magnitude)*100); 
    graphics.lineTo(100,(dataList[(this.index)++].magnitude)*100);
    stage.addChild(graphics);
};

You only need to add your Shape to the stage one time, and it will redraw your graphics each time every time the Stage is updated. Your tick call is adding new Graphics instructions every frame, so it will stack all those calls up, and eventually be really slow.

Make sure you clear your Graphics before you draw new things to it, unless you are trying to create an additive effect (and if you are, perhaps look into caching/updateCache to make it performant). Check out the "curveTo" and "updateCache" examples in the GitHub repository for usage.

Once you have added the Shape to the stage instead of the Graphics, feel free to post some follow up questions, and I can try and assist further.

Cheers :)