How to get css width afterRender in emberjs

I am trying to instantiate a canvas component with emberjs. I am using EaselJS to draw some text onto it. However, it looks like the CSS is being applied after it draws the text and the text gets stretched out when it applies width/height 100%. The console logs an incorrect value of width.

I want my canvas to fill its parent and I don't know how big it will be until run time which is why height and width are 100%.

I tried using Em.run.next like it says here: Ember.js - afterRender fires before CSS is finished but it did not change anything. Is there another event that fires after CSS has been applied? I need to do some initialization that depends on the width and height of the canvas.

.easelCanvas
{
  height:100%;
  width:100%;
  background-color: white;
}

Here is my EmberJS component:

    export default Ember.Component.extend({
      tagName: 'canvas',
      classNames: ['easelCanvas'],
      canvasModel: null,
      didInsertElement: function () {
        this._super();
        Ember.run.scheduleOnce('afterRender', this, function () {
          console.log(this.$().css('width'));
          var stage = new createjs.Stage(this.element);
          var someText = new createjs.Text("HELLO WORLD!", "40px Arial", "#ff7700");
          stage.addChild(someText);
          stage.update();
        });
      }
});