CODEWITHSUNDEEP
javascripteaseljs
AL-zami
AL-zami

Reputation: 9066

dragging effect using easeljs

I've just started to learn easeljs. I have tried to create a rectangle which will follow the mouse coordinates, but it is not working. What's wrong here and how it can be fixed?

fiddle

<html>
<head>
<style>
*{margin:0px;padding:0px;}
</style>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="mycanvas" width="500" height="500" style="border:1px solid black;"></canvas>
<script>
function init(){

var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
shape.graphics.beginFill('red').drawRect(300,200,40,40);
stage.addChild(shape);

 createjs.Ticker.addEventListener("tick",tick);
function tick(event){
shape.x=stage.mouseX;
shape.y=stage.mouseY;

stage.update(event);

}
}
window.onload=init;
</script>
</body>
</html>

Upvotes: 1

Views: 235

Answers (1)

Matt Ellen
Matt Ellen

Reputation: 11592

You have set the x and y of your rectangle to be 300 and 200 respectively, so if you set those to 0, then the rectangle will start in the right place and follow the mouse as expected.

shape.graphics.beginFill('red').drawRect(0,0,40,40);

Upvotes: 3

Related Questions