Can't connect to paperscript?

<!DOCTYPE html>
<html>
<head>
    <title>Circles</title>
    <script type = "text/javascript" src="paper-full.js"></script>
    <link rel="stylesheet" type="text/css" href="circles.css"
    <script type="text/paperscript" canvas="myCanvas">
        function onKeyDown(event) {
            let maxPoint = new Point(view.size.width, view.size.height);
            let randomPoint = Point.random();
            let point = maxPoint * randomPoint;
            new Path.Circle(point, 10).fillColor = "orange";
        }
    </script>     
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>
</html>

Why can’t I connect to Paperscript? The script function just comes out as html at the top.

Do you see any errors in your browser’s console (Ctrl + Shft + J in Chrome)?

None! I’m so confused and terribly frustrated. The function just appears as html at the top.

There’s a couple of misunderstandings here

  1. the script tag type attribute is the mime type of the script
    • in your case type='text/javascript'
  2. there is no canvas attribute on the script tag

Take a look at the docs for examples of setting up using script tags

http://paperjs.org/tutorials/getting-started/using-javascript-directly/

I don’t understand what you’re saying.

Are you sure about that? The first example (shown below) shows using a canvas attribute for the script with type=“text/paperscript”.

<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.js"></script>
<!-- Define inlined PaperScript associate it with myCanvas -->
<script type="text/paperscript" canvas="myCanvas">
	// Create a Paper.js Path to draw a line into it:
	var path = new Path();
	// Give the stroke a color
	path.strokeColor = 'black';
	var start = new Point(100, 100);
	// Move to start and draw a line from there
	path.moveTo(start);
	// Note the plus operator on Point objects.
	// PaperScript does that for us, and much more!
	path.lineTo(start + [ 100, -50 ]);
</script>
</head>
<body>
	<canvas id="myCanvas" resize></canvas>
</body>
</html>

I’m so frustrated I started over. I made all new folders to try and get this all right. I don’t understand what the problem is.

Oops. I wasn’t aware there were two methods of using this script.

The code you posted is on this page

And the one I went straight to was this

I keep getting this in the console…
Uncaught SyntaxError: Unexpected token (2:9)
at raise (paper-full.js:14884)
at unexpected (paper-full.js:15524)
at expect (paper-full.js:15520)
at parseFor (paper-full.js:15767)
at parseStatement (paper-full.js:15612)
at parseTopLevel (paper-full.js:15544)
at Object.exports.parse (paper-full.js:14798)
at parse (paper-full.js:16097)
at compile (paper-full.js:16324)
at execute (paper-full.js:16355)

Hello,

You probably aren’t working on this project anymore, but I ran into the same problem and found a solution. I was getting the same error you got in the console because I was using “let” and “const” to initialize my variables. Apparently, paperscript doesn’t allow you to initialize variables in this way. Once I changed everything to “var”, it worked. I hope this will help anyone who has the same problem.