paperjs: stroke with gradient

Question

I want to draw a graph (a line) which is blue when the values are 0 and gets more red when the values are ~100 (so the color of the line has to be a gradient).

I 've got two ideas that might work, but maybe there is a better solution out there.

1. Don't draw a line, but multiple circles every pixel and color those circles based on its x-value.

2. Place the gradient in the background and use the line as a clipping mask. Is that possible in paperjs and if yes how?

Although idea 1. is pretty easy to implement I don't think that I will get a smooth result.

I would be very grateful if could give me a better approach or a example how I can use a line as a clipping mask.

Answer 1

Try the code below. Play around with values to get the result you exactly want. The below code will help you understand how to apply gradient to a line.

// Define two points which we will be using to construct
// the path and to position the gradient color:
var point1 = [0,350];
var point2 = [350, 0];

// Create a line between point1 and point2 points:
var path = new Path.Line({
    from: point1,
    to: point2,
    // Fill the line stroke with a gradient of two color stops
    strokeColor: {
    gradient: {
        stops: ['blue', 'red']
    },
            //origin and destination defines the direction of your gradient. In this case its vertical i.e bottom(blue/cooler) to up(red/warmer) refering to link you sent.
    origin: [0,200], //gradient will start applying from y=200 towards y=0. Adjust this value to get your desired result
    destination: [0,0]
},
    strokeWidth: 5
});

Hope this makes things a bit easier for you.

Note: You can also change the percentage of blue and red in the gradient given above like this:

...
gradient: {
    // blue from 0% to 33%, mix between blue and red from 33% to 66%, and remaining red (66% to 100%)
    // mix between red and black from 20% to 100%:
    stops: [['blue',0.33], ['red',0.66]]
},
origin: [0,350],
destination: [0,0],
...