JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<canvas id="draw" width="300" height="300"></canvas>
<div id="status">
<div>--</div>
</div>
CSS
#draw {
background: #55EE55;
}
#status {
border: 1px solid #CCCCCC;
}
JavaScript
var
stage, circle,
which_click = function (e) {
var ne = e.nativeEvent;
return (
(ne.which ? ne.which === 1 : ne.button === 1) ? 'left' :
(
(ne.which ? ne.which === 3 : ne.button === 3) ? 'right' :
(ne.which ? ne.which === 2 : ne.button === 2) ? 'middle' : '?'
)
);
},
status = function (t) {
$('#status').append($('<div />').text(t));
if ($('#status > div').length > 10) { $('#status > div').first().remove(); }
console.log(t);
};
stage = new createjs.Stage('draw');
var circle = new createjs.Shape();
circle.graphics.beginFill('red').drawCircle(0, 0, 50);
circle.x = circle.y = 100;
circle.on('pressup', function (e) {
status(e.type + ' ' + which_click(e));
});
circle.on('mousedown', function (e) {
status(e.type + ' ' + which_click(e));
});
stage.addChild(circle);
stage.update();