I think I figured out a workaround as well - paper.PaperScript.load()
or to elaborate:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function () {
$("#jq").text("jQuery is now loaded.")
var paperUrl = 'http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js';
var lateLoad = function() {
$.getScript(paper_url, function() {
$("#pp").text("Paperjs is now loaded.");
paper.PaperScript.load(); // <-- The fix!
});
};
setTimeout(lateLoad, 1000);
//$.getScript(paperUrl, function() {
// $("#pp").text("Paperjs is now loaded.");
//});
});
</script>
</head>
<body>
<script type="text/paperscript" canvas="myCanvas">
$('body').css({"background-color": "#999"});
alert('hi!');
</script>
<p id="jq">jQuery NOT loaded yet.</p>
<p id="pp">Paperjs NOT loaded yet.</p>
</body>
</html>
That causes paperscript to scan for all the paperscripts. I found it at https://github.com/paperjs/paper.js/blob/master/src/core/PaperScript.js#L270 while googling for "paperscript" in the github repo. Though it still doesn't explain why paper doesn't do the load() on its own when dynamically loaded.
EDIT - I understand what went wrong. It's related to https://github.com/jquery/jquery/blob/master/src/core.js#L768 because paperjs doesn't check if the window loaded event had already fired i.e document.readyState === "complete"
. I submitted a pull request to paperjs https://github.com/paperjs/paper.js/pull/156