Paper.js Stroke Drawing Inconsistently

I am having trouble not only fixing this issue but also reproducing it. I have a web app with a lot going on but the problem I'm having with paper.js is that sometimes the stroke

Solution 1:

The issue stems from the canvas not being sized before PaperScript takes over, thus creating a tiny canvas that is then scaled up to fit the element.

The solution is to work on the timing of the PaperScript load. I fixed it by modifying my loading code like so (shortened and "para-coded" for brevity):

$(document).ready(function() { // wait for elements to propagate
  $.get(...) // load html for text from external files
    .then($('images').waitForImages() // wait for images to load
      .then(function() {
         resizeCanvas(); // make the canvas the correct size

         $.getScript(paper_url, function() { // load paper.js dynamicallyconsole.log("Paperjs is now loaded.");
           paper.PaperScript.load(); // get paper.js to scan your application for paperscript
         });

         // do everything else post load
       });
     });
  });
});

I found this at https://stackoverflow.com/a/14114337/1288913. I hope it helps someone out there!