EaselJS and HTML5 Canvas - ES6 Custom Display Objects (based on ES5 version: http://www.createjs.com/tutorials/Inheritance/)

App.js

import CircleButton from './CircleButton';

// Init stage
const stage = new createjs.Stage("demo");

// Button black
const btn = new CircleButton('Hi');
btn.x = 50; btn.y = 50;
stage.addChild(btn);

// Button purple
const btn2 = new CircleButton('hello', 'purple', 50);
btn2.x = 100; btn2.y = 100;
stage.addChild(btn2);
btn2.addEventListener('animationEnd', function() {
  console.log ('fadeIn animation completed')
})

// Ticker
createjs.Ticker.addEventListener("tick", stage);

CircleButton.js

// CircleButton.js
class CircleButton extends createjs.Container {

  constructor(text = '', color = '#222', radius = 40) {
    // call Container constructor
    super();

    // set props
    this.text = text;
    this.radius = radius;
    this.color = color;

    // Init component
    this.setup();
  }

  setup() {
    // Create a circle shape
    const circle = new createjs.Shape();
    circle.graphics.beginFill(this.color).drawCircle(0, 0, this.radius);
    this.addChild(circle, txt);

    // Create a Text
    const txt = new createjs.Text(this.text, "20px Arial", 'white');
    this.addChild(txt);

    // Center text inside circle
    txt.x = txt.getMeasuredWidth()/2 * -1;
    txt.y = txt.getMeasuredHeight()/2 * -1;

    // FadeIn all
    this.alpha = 0;
    createjs.Tween.get(this).to({ alpha: 0.9 }, 1000).call(this.handleComplete);
  }
  
  // Dispatch an event at the end of animation
  handleComplete() {
    this.dispatchEvent('animationEnd');
  }
}

export default createjs.promote(CircleButton, "Container");