JSFiddle - React, Tailwind, and code Playground

by lannymcnie

HTML

<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<canvas id="stage" width="800" height="600"></canvas>

JavaScript

var stage = new createjs.Stage("stage");
stage.enableMouseOver(30);

var shape = new createjs.Shape();
shape.graphics.beginFill("#FF0000").lineTo(20, 20).lineTo(0, 40).lineTo(0, 0).endFill();
shape.regX = 10;
shape.regY = 20;
shape.x = 100;
shape.y = 100;
stage.addChild(shape);

createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", function(){
	stage.update();
});

var mouseMove = function(){
	var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);
  var angle = rads * (180 / Math.PI) - offset;
  shape.rotation = angle;
  console.log("angle: "+ angle);
};
var offset = 0;
stage.addEventListener("stagemousedown", function(){
	stage.addEventListener("stagemousemove", mouseMove);
  
  // Determine initial offset, and take off shape rotation
  var rads = Math.atan2(stage.mouseY - shape.y, stage.mouseX - shape.x);
  offset = rads * (180 / Math.PI) - shape.rotation;
  
  mouseMove();
});
stage.addEventListener("stagemouseup", function(){
	stage.removeEventListener("stagemousemove", mouseMove);
});