CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvaseaseljs
koffing
koffing

Reputation: 13

Javascript function from a JS file doesn't get called from the canvas

I'm trying to learn about JavaScript and the html5 canvas, however, it's proving a little confusing and I don't understand why it doesn't seem to work...

I am working on creating a simple map that has some of the capabilities of google maps(drag and drop/zoom in/out/etc). In order to do this, I chose html5 canvas and easeljs for the drag and drop functions.

I have a javascript file (path.js) which contains 2 functions:

pathConstructor() - example function from the easeljs tutorial

drawMap() - copy of the first function slightly modified (and probably wrong right now)

Everything worked fine when I called pathConstructor() from the canvas, however, after I replaced it with drawMap(), everything stopped working. It won't even work if I replace drawMap() with pathContrcutor() right now.

I put some alerts before and after calling the function from the canvas and inside pathConstructor(). The before alert goes off but the others don't so for some reason the function never gets called...

If I use the pathConstructor code as inline code in the canvas then it works just fine, however, I would like to avoid that since I believe it's bad programming. I want it to be neat and each script to have its own file.

Anyone know why this is happening?

HTML

<!Doctype html>
<html>
<head>
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script src="path.js" type="text/javascript"></script>
</head>
<body>
    <canvas id="canvas" width="1300px" height="800px"style="border:1px dotted black;">
        <script>pathConstructor();</script>
    </canvas>
</body>
</html>

Javascript

var stage;
function pathConstructor() {
    alert('inside pathConstructor');
    stage = new createjs.Stage('canvas');
    // this lets our drag continue to track the mouse even when it leaves the canvas:
    // play with commenting this out to see the difference.
    stage.mouseMoveOutside = true;
    var circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 50);
    var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
    label.textAlign = "center";
    label.y = -7;
    var dragger = new createjs.Container();
    dragger.x = dragger.y = 100;
    dragger.addChild(circle, label);
    stage.addChild(dragger);
    dragger.on("pressmove", function(evt) {
        // currentTarget will be the container that the event listener was added to:
        evt.currentTarget.x = evt.stageX;
        evt.currentTarget.y = evt.stageY;
        // make sure to redraw the stage to show the change:
        stage.update();
    });
    stage.update();
}
function drawMap() {
    stage = new createjs.Stage('canvas');
    var bitMap = new createjs.Bitmap('middle-earth-map.jpg');
    stage.mouseMoveOutside = true;
    var dragger = new createjs.Container();
    dragger.x = dragger.y = 0;
    dragger.addChild(bitMap);
    stage.addChild(dragger);
    dragger.on('pressmove', function(evt2)) {
        evt2.currentTarget.x = evt2.stageX;
        evt2.currentTarget.y = evt2.stageY;
        stage.update();
    });
stage.update();
}

Upvotes: 0

Views: 118

Answers (1)

Alexus
Alexus

Reputation: 1973

For me it's working fine, you just have to remove that extra ")" in dragger.on('pressmove', function(evt2)) {;

dragger.on('pressmove', function(evt2)) {
    evt2.currentTarget.x = evt2.stageX;
    evt2.currentTarget.y = evt2.stageY;
    stage.update();
});

Upvotes: 2

Related Questions