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

Usually, scripts are enqued to WP with a PHP function that adds scripts of type text/javascript (/) and should be fine for the Paper.js library itself.

But... The script utilizing Paper.js should be of type text/paperscript (/), 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=".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>

Is there any other solution? I tried to search some tutorials for Paper.js on Wordpress, but couldn't find anything.

I need to use Paper.js (http://paperjs/), and specifically one of their examples (http://paperjs/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/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/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/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>

Is there any other solution? I tried to search some tutorials for Paper.js on Wordpress, but couldn't find anything.

• javascript
• wp-enqueue-script
• library

• Did you add canvas with id smoothCanvas, like this <canvas id="smoothCanvas" resize></canvas>? – obiPlabon Commented Feb 20, 2018 at 12:29
• Yes, exactly like that. – CharlesM Commented Feb 20, 2018 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 Commented Feb 20, 2018 at 13:42
• So, what's the problem now? Need to enqueue with text/paperscript or something else? – obiPlabon Commented Feb 20, 2018 at 15:19

2 Answers 2

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

Or in case there's no text/javascript :

add_filter( 'script_loader_tag', function( $tag, $handle, $src ) {      
      if( 'script_handle' === $handle ) {
          $tag = str_replace( '<script', '<script type="text/paperscript" ', $tag );
      }
      return $tag;
}, 10, 3 );