I need to use Paper.js (http://paperjs.org/), and specifically one of their examples (http://paperjs.org/examples/smoothing/) on a WordPress website.

Usually, scripts are enqued to WP with a PHP function that adds scripts of type text/javascript (https://developer.wordpress.org/reference/functions/wp_enqueue_script/) and should be fine for the Paper.js library itself.

But... The script utilizing Paper.js should be of type text/paperscript (http://paperjs.org/tutorials/getting-started/working-with-paper-js/), and the only solution I could come up with is echo both script tags to my (child theme to a Genesis Framework) header.php file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js" integrity="sha256-qZnxjtwxg51juOcYyANvBWwFoahMFNB2GSkGI5LGmW0=" crossorigin="anonymous"></script>
<script type='text/paperscript' canvas='smoothCanvas' href='../js/smoothing.js'></script>

The files are correctly recognized (I can see them in my Debugger), and placed before other scripts, and when loading the page with the #smoothCanvas, the contents of smoothing.js are called by an "exportable" function:

window.smoothing = function smoothing(){ // smoothing code }

Now, the canvas is displayed, but there's just no way to interact with it, while on localhost it works just fine. The JS console isn't of any help.

I tried to search some tutorials for Paper.js on Wordpress, but couldn't find anything.

  • Did you add canvas with id smoothCanvas, like this <canvas id="smoothCanvas" resize></canvas>? – obiPlabon Feb 20 '18 at 12:29
  • Yes, exactly like that. – CharlesM Feb 20 '18 at 13:09
  • Just found out it was not a problem in the HTML, but in the paperscript... I add to declare the smoothing() function to be "exportable", that is window.smoothing = function smoothing(){} Now the canvas does display the example, but there's no way to interact with it. I'll update the question. – CharlesM Feb 20 '18 at 13:42
  • So, what's the problem now? Need to enqueue with text/paperscript or something else? – obiPlabon Feb 20 '18 at 15:19
  • Yes, it's different: I can see the canvas but not interact with it. I'm not sure it's still a Wordpress-related issue, but on localhost it works, on the WP page it doesn't. – CharlesM Feb 20 '18 at 16:46

I'm not sure if this will solve your problem, but you can use the script_loader_tag filter to change the type text/javascript to text/paperscript

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {
  if( 'your-script-handle' === $handle ) {
    $tag = str_replace( 'text/javascript', 'text/paperscript ', $tag );
  return $tag;
}, 10, 3 );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.