Paper.js uncaught syntax error

Question

Getting lots of issues with Paper.js. Doing Colt Steele's Web Developer Bootcamp on Udemy. I'm on Section 19. Currently trying to make a Patatap clone. Here's when I'm stuck:

http://codepen.io/SlouchingToast/pen/LWLXYZ

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Circles</title>
    <link rel="stylesheet" type="text/css" href="circles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.10.3/paper-full.min.js"></script>

    <script type="text/paperscript" canvas="myCanvas">

    function onKeyDown(event) {
        var maxPoint = new Point(view.size.width, view.size.height);
        var randomPoint = Point.random();
        var point = maxPoint * randomPoint;
        new Path.Circle(point, 10).fillColor = "olive";
    }

    var animatedCircle = new Path.Circle(new Point(300,300), 100);
    animatedCircle.fillColor = "red";

    }

    </script>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>

</body>
</html>

CSS

canvas {
    width: 100%;
    height: 100%;
    background: black;
}

body, html {
 height: 100%;
 margin: 0;
}

Chrome Console Error

Uncaught ReferenceError: animatedCircle is not defined
    at at.paper._execute (<anonymous>:11:2)
    at u (paper-full.min.js:38)
    at HTMLCollection.l (paper-full.min.js:38)
    at HTMLCollection.l (paper-full.min.js:32)
    at Function.f [as each] (paper-full.min.js:32)
    at f (paper-full.min.js:38)
paper._execute @ VM519:11
u @ paper-full.min.js:38
l @ paper-full.min.js:38
l @ paper-full.min.js:32
f @ paper-full.min.js:32
f @ paper-full.min.js:38

What's supposed to happen, is just displaying a circle. That's it.

There's an extra closing bracket right before the closing script tag. That's one error. — Brian
– Brian, Commented Mar 14, 2017 at 1:37

sapics · Accepted Answer · 2017-03-20 09:21:42Z

1

By replacing paperscript to below, it works. First, remove unnecessary end tag }. Second, fix animateCircle to animatedCircle.

    <script type="text/paperscript" canvas="myCanvas">
    function onKeyDown(event) {
        var maxPoint = new Point(view.size.width, view.size.height);
        var randomPoint = Point.random();
        var point = maxPoint * randomPoint;
        new Path.Circle(point, 10).fillColor = "olive";
    }

    var animatedCircle = new Path.Circle(new Point(300,300), 100);
    animatedCircle.fillColor = "red";
    </script>

edited Mar 20, 2017 at 9:21

answered Mar 20, 2017 at 9:15

sapics

1,1248 silver badges22 bronze badges

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

Collectives™ on Stack Overflow

Paper.js uncaught syntax error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related