JSFiddle - React, Tailwind, and code Playground
HTML
<body onload="init();">
<canvas id="myCanvas" width="800" height="600">
O seu navegador não suporta HTML5. (<i>Your browser does not support HTML5.</i>)
</canvas>
</body>
JavaScript
(function() {
// Objeto de botão customizado
var MyButton = function(sLabel, sColor, oClickCallback) {
// Chama o initialize do objeto protótipo (createjs.Container)
this.initialize();
// Armazena a referência para o callback do evento de click
m_oClickCallback = oClickCallback;
// Cria o conteúdo do botão
var oText = new createjs.Text(sLabel, "40px Arial", "#ffffff");
oText.textBaseline = "top";
oText.textAlign = "center";
var iWidth = oText.getMeasuredWidth() + 30;
var iHeight = oText.getMeasuredHeight() + 20;
var oBackground = new createjs.Shape();
oBackground.name = "Background";
oBackground.graphics.beginFill(sColor).drawRoundRect(0, 0, iWidth, iHeight, 10);
oText.x = iWidth / 2;
oText.y = 10;
this.addChild(oBackground, oText);
// Captura o evento de click
this.addEventListener("click", this.handleClick);
}
// Define o protótipo
MyButton.prototype = new createjs.Container();
// Função de tratamento do click no botão. Invoca o callback armazenado.
MyButton.prototype.handleClick = function(oEvent) {
m_oClickCallback(oEvent.target);
}
// Atribui o objeto ao escopo global de "window"
window.MyButton = MyButton;
}());
// Função de inicialização. Cria o botão.
function init() {
g_oStage = new createjs.Stage("myCanvas");
var oButton = new MyButton("Olá mundo!", "red", function() { alert("Funciona!"); });
g_oStage.addChild(oButton);
g_oStage.update();
}