JSFiddle - React, Tailwind, and code Playground

HTML

<script src="src=&quot;http://code.createjs.com/createjs-2013.02.12.min.js&quot;"></script>
<body>
	<header>
		<h1>Simple Resize Test</h1>
	</header>
    <p>Just move your mouse to the rectangle</p>
		<div id="canvasWrapper" role="main">
			<canvas id="stageCanvas" width="400" height="300"/>   
		</div>
	<footer></footer>
</body>

CSS

#canvasWrapper
{
	width: 400px;
	height: 300px;
	margin: auto;
	background-color:#FFFFFF;
    border: 1px solid #DCD8D4;
}

JavaScript

(function(){
	var stage, myCanvas;
	var update = true;
 
	this.init = function() {
		myCanvas = document.getElementById("stageCanvas");
		stage = new createjs.Stage(myCanvas);
		stage.enableMouseOver();
		stage.mouseEnabled = true;
		stage.mouseMoveOutside = true;
		
        // Reference Shape
		var rectFijo0 = new createjs.Shape();
		rectFijo0.graphics.beginFill("#DCD8D4").rect(140,160,78,35);
		stage.addChild(rectFijo0);
		
		// Shape
		var rectOpt0 = new createjs.Shape();
		rectOpt0.graphics.beginFill("#C51A76").rect(0,0,78,35);
		
		txtOpt0 = new createjs.Text("TEST","bold 20px","#FFF");
		txtOpt0.textAlign ="center";
		txtOpt0.x = 50;
		txtOpt0.y = 50;
		
		// Container
		var containerOpt0= new createjs.Container();
        containerOpt0.mouseEnabled = true;
		//#######
        // Probably here is my problem. I don't understand why if I use regX and regY the rectangle moves the lower right corner to the center, instead of just using this point as a registration point. Why? What I am not understanding?
        containerOpt0.regX = 78/2; containerOpt0.x = 140 + 78/2;
		containerOpt0.regY = 35/2; containerOpt0.y = 160 + 35/2;
        //#######
		containerOpt0.onPress = pressHandler;
		containerOpt0.onMouseOver = mouseOverHandler;
		containerOpt0.addChild(rectOpt0, txtOpt0);
		
		stage.addChild(containerOpt0);
		stage.update();
		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener("tick", tick);
	}
	
	function pressHandler(e){
	// onPress Handler to drag
		var offset = {x:e.target.x-e.stageX, y:e.target.y-e.stageY};
		e.onMouseMove = function(ev) {
			e.target.x = ev.stageX+offset.x;
			e.target.y = ev.stageY+offset.y;
			update = true;
		}
	}
	
	function mouseOverHandler(e){
		e.target.scaleX = .5;
        e.target.scaleY = .5;
        console.log(e.target);
		update = true;
	}
	
	function tick() {
    if (update) {
			update = false;
			stage.update();
		}
	}

	window.onload = init();
}());