Integrating paper.js into Windows Store app issue RRS feed

  • Question

  • We are attempting to build a single page application using a WinJS Navigator control. We are using the paperJS library to perform some canvas operations but are having issues getting the library to work for a very strange reason:


    When we include the reference to paper.js and add the script tag at the bottom of the default.html file, everything seems to work as expected.

    However, when we try and perform the same operation inside a page control, the script tag seems to have its attributes stripped off, causing paper.js to throw an error


    This presents a unique issue where the paper.js script tag requires an attribute "canvas" which is not presenting in the page control at runtime.


    An additional strangeness is that with the paper.js library included in default.html, the paperscript in the page control does not execute at all. We suspect this has something to do with the script type being "text/paperscript", but we are not sure.

    Thank you

    Tuesday, March 10, 2015 9:59 AM

All replies

  • Are you sure that paper.js is supported for use in a WinRT HTML application? 

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, March 10, 2015 4:21 PM
  • Thanks for the reply.


    We think the source of the problem is not the paperJS integration but an issue with custom attributes in script tags and where you define these tags.


    We need to have custom attributes in script tags to identify some DOM elements and parameters to paperJS. If the script is defined in the default.js we can use these custom attributes without any issue (read/set attributes) through JavaScript.


    The problem comes when the script tag is located within a page control. It seems that in this case the custom attributes are missing and we cannot read them. It appears as though they are being stripped off when the page control is loaded.


    We have addressed the problem by manually adding the missing attributes through JavaScript before they are required by the app but we are not sure if this is the best approach.


    Is there a particular reason that script tags have no attributes within page controls?


    For reference, here are some examples of what we're refering to:


    Default.html snippet - Working when defined outside the navigator control


    <script id="MyScript" data-info="info" name="fernando" src="/js/test.js"></script>


    pageControl.html snippet - Not working when defined inside a page control


     <script id="MyScript" data-info="info" name="fernando" src="/js/test.js"></script>


    Workaround.js snippet - Our fix is to run the following, inside the page control, but before the MyScript script executes to ensure that the correct parameters exist at its runtime


    (function () {

        var me = document.querySelector('script[id="MyScript"]');

        me.setAttribute("name", "James");

        me.setAttribute("data-info", "info");

        var info = me.getAttribute("data-info");

        var name = me.getAttribute("name");

        console.log(info + "->Name: " + name);


    Tuesday, March 24, 2015 10:54 AM