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

Question

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();
}

Alexus · Accepted Answer · 2016-08-25 07:37:23Z

2

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();
});

answered Aug 25, 2016 at 7:37

Alexus

1,9623 gold badges26 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

koffing Over a year ago

Now everything seems to work, thanks! How can I troubleshoot javascript? I triedto use try{} catch(){} but that seems to do nothing. If there is an error it doesn't even get into the function from what I've seen

Lanny Over a year ago

Your typo is unfortunate because it creates perfectly legit code. You can wrap anything in { } blocks, so there was nothing syntactically wrong with your example -- it just wasn't what you had in mind.

Collectives™ on Stack Overflow

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

HTML

Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

Javascript

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related