How can I write a Paper.js script in a different file from html? (I've followed the library's instruction but it still isn't working)

Question

It seems silly, but it is annoying. I am using VScode and I am trying to code a js script in a different file to get the highlight syntax, but it isn't working (I could change the json content as suggested in another stackoverflow question and enter it inline, but I would like to have a separated file).

The files are all in the same folder:

paper-full.js
circles.js
circles.html

If I try to run the html page with the script inline, the chrome loads smoothly

The circles.html with script inline

circles.html

<!DOCTYPE html>
<html>
    <head>
        <title>Circles</title>
        <!-- Load the Paper.js library -->
        <script type="text/javascript" src="paper-full.js"></script>
        <link rel="stylesheet" type="text/css" href="circles.css">
        <!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
        <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>

But when I try to get a separate file to this script (like suggested in http://paperjs.org/tutorials/getting-started/working-with-paper-js/), the browser gives error

The circles.html and circles.js, in different files

circles.html

<!DOCTYPE html>
<html>
    <head>
        <title>Circles</title>
        <!-- Load the Paper.js library -->
        <script type="text/javascript" src="paper-full.js"></script>
        <link rel="stylesheet" type="text/css" href="circles.css">
        <!-- <script type="text/paperscript" src="circles.js" canvas="myCanvas"></script> -->
        <script type="text/paperscript" canvas="myCanvas" src="circles.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" resize></canvas>
    </body>
</html>

circles.js

// Create a Paper.js Path to draw a line into it:
var path = new Path();
// Give the stroke a color
path.strokeColor = 'red';
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 ]);

var myCircle = new Path.Circle(new Point(100, 70), 50);
myCircle.fillColor = 'black';

The browser alerts:

Error 1:

Access to XMLHttpRequest at 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

request @ paper-full.js:13929

paper-full.js:13929

Error 2:

Uncaught DOMException: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///Users/jarvis/Documents/webnoob/webdev/basscolors/circles.js'.

    at Object.request (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:13929:14)

    at HTMLCollection.loadScript (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16957:10)

    at HTMLCollection.forIn (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:56:11)

    at Function.each (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:75:7)

    at loadAll (file:///Users/jarvis/Documents/webnoob/webdev/basscolors/paper-full.js:16974:8)

Warning:

[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

request @ paper-full.js:13905

I've tried some answers through google about this error, but none of them really solved it, it seems I am hurting the http protocol. How should I fix it, what am I missing?

Have a look at this thread , should be helpful https://stackoverflow.com/questions/40495026/paper-js-external-file-will-not-load — Shrish B, Jul 09 '19 at 03:34

score 1 · Accepted Answer · edited Aug 04 '19 at 14:11

PaperScript code is loaded just like any other JavaScript using the <script> tag, except for the type being set to "text/paperscript" or "text/x-paperscript" . The code can either be an external file (src="URL"), or inlined:

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.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>

If we copy the inlined code to a file called js/myScript.js we can rewrite the above example to load the external file instead.

<!DOCTYPE html>
<html>
<head>
<!-- Load the Paper.js library -->
<script type="text/javascript" src="js/paper.js"></script>
<!-- Load external PaperScript and associate it with myCanvas -->
<script type="text/paperscript" src="js/myScript.js" canvas="myCanvas">
</script>
</head>
<body>
    <canvas id="myCanvas" resize></canvas>
</body>
</html>

Source : http://paperjs.org/tutorials/getting-started/working-with-paper-js/

How can I write a Paper.js script in a different file from html? (I've followed the library's instruction but it still isn't working)

1 Answers1