paper.js Stroke Drawing Inconsistently

Question

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 will draw way too large. Here is how it should look:

But it draws like this:

Anyone have any clues how this could be happening? It only shows up intermittently. Thanks!

EDIT:

I have figured out that the problem originates from that I dynamically size my <canvas> element to fit the screen on load with jQuery. I have now added an event that passes the height and width to my Paperscript, but it is not working still. Will post solution as soon as I have it.

Answer 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 dynamically
           console.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!