External script not working in PaperJS v0.9.22

797 views Asked by At

I am new to paperJS and I'm trying to include an external paperscript file in html, but it isn't working. While the inline scripting is working fine. My code are:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/paper.js"></script>
</head>
<body>
    <script type="text/paperscript" src = "js/myScript.js" canvas = "myCanvas" >
    </script>
    <canvas id="myCanvas" resize></canvas>

paperScript Code (myScript.js):

// 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 ]);

I found an old link on stackOverflow which says that using version 0.9.10 fix the problem. But is that issue still not fixed in newer version? Here's the link:

How to use paperscript from external source?

3

There are 3 answers

0
Navendra On BEST ANSWER

This is not paperJs issue. Here I was trying to load a resource from the local file system, which chrome doesn't permit (Violation of its same-origin policy) and so we need a local web server.Why?

Local web server can be setup using WAMP (on Windows), MAMP (on OS X), LAMP(for ubuntu). It can aslo be setup by Python http-server and NodeJS http-server.

3
bmacnaughton On

The only guess I can make based on the information here is that you're loading paper-core.js, not paper-full.js. paperscript is not implemented in paper-core.js.

The behavior if it's paper-core.js would be that your code is never called because there is nothing to interpret paperscript.

0
Alex On

Actually I found the solution via another student in Udemy -Git link here. Go to the paper-full.js (it works only with the downloaded version, not CDN) and transform the line

xhr.open((options.method || 'get').toUpperCase(), options.url,
Base.pick(options.async, true));    

into only

xhr.open((options.method || 'get').toUpperCase(), options.url);

I understood that's not to be used in normal website as it's against a security protocols, so it's just for practicing. The async method is optional according to Paperjs. By the way, for me it works on Firefox, but not in Chrome.