Color gradient renders as black

I’m attempting to use paper.js with javascript directly: http://paperjs.org/tutorials/getting-started/using-javascript-directly/

and cannot get gradients to work. Instead of a color gradient the line just appears to be black. This occurs for all shapes, so I’m pretty sure I’m somehow setting up paper.js incorrectly. Any help would be appreciated!

Here’s an example codeblock:

paper.install(window);
window.onload = function() {
    // Setup directly from canvas id:
    paper.setup('myCanvas');
  var path = new Path();
  path.strokeColor = {
          gradient: {
              stops: ['blue', 'red']
          },
          origin: new Point(350, 0),
          destination: new Point(0, 350)
      };
  path.strokeWidth = 5;
  path.add(new Point(350, 0));
  path.add(new Point(0, 350));
  
    view.draw();
}

jsfiddle: https://jsfiddle.net/3p1sr68n/2/

Answer

In your example you referenced library as

<script type="text/javascript" src="js/paper.js"></script>

however jsfiddle does not know about that local assert with path: js/paper.js.

Code snippet is not working since paper.js is not loaded.

In order to make it work for jsfiddle environment you might want to include CDN hosted version of the library:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js"></script>

Working example in jsfiddle

Or run your original code snippet on your localhost with library which hosted on your localhost as well under js/paper.js path.