Using paperjs with jsfiddle

Question

I just found out about paperjs, an awesome framework for vector graphics that you probably already heard of.

I stumbled upon a problem though, I absolutely can NOT figure out how to make it work with jsfiddle! The few examples I found online were only working because all the code was jammed in the HTML section, in a paperscript tag.

Any idea how to make the "Javascript" section work, thus making use of the syntax coloring?

Thanks a lot!

Answer 1

You can not put your paperjs code in the javascript panel by default. You need to hack jsFiddler to do this. See the document from jsFiddler

Please set the Code Wrap to no wrap(head) (default is onLoad) and Franework to No-library (pure JS).

Similar to CoffeeScript, Paperscript requires the script tag to be the type of text/paperscript and provide the id of the canvas element in the canvas parameter. Enter following into the HTML panel and you’ll be able to write Paperscript in JavaScript panel.

<canvas id="some-unique-id" resize keepalive="true" style='height: 200; width: 200;'>    </canvas>
<script>(function(){var s="script",n='\n',d=document,b=d.getElementsByTagName(s)[2].innerHTML.split(n);d.write('<'+s+' type="text/paperscript" canvas="' + document.getElementsByTagName('canvas')[0].id + '">'+b.slice(2,b.length-2).join(n)+'</'+s+'>')})()</script>

Example: http://jsfiddle.net/zalun/LrGEm/12/

Answer 2

There is also sketch.paperjs.org

Sketch.paperjs.org

Answer 3

Alternatively you can just use https://www.jsbin.com to do your coding . It will allow JS to be written in the javascript place holder .