JSFiddle - React, Tailwind, and code Playground

by Luiz Carlos Vieira

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
        this.clickCallback = 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);
        
        // Faz o target dos eventos ser diretamente o objeto MyButton, ao invés do texto
        // ou do background nele inclusos
        this.mouseChildren = false;

        // 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) {
		oEvent.target.clickCallback(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);
    
    var oButton2 = new MyButton("Olá universo!", "blue", function() { alert("Funciona também!"); });
    g_oStage.addChild(oButton2);
    oButton2.y += 100;
    
    g_oStage.update();
}