The diagram serves its purpose, but it looks a bit dull. Add some shine to it by defining three new color properties in the canvas object—color, topColor, bottomColor—and setting their default values to black, red, and blue, respectively:
property color color: "black" property color topColor: "red" property color bottomColor: "blue"
Then, let's make use of these properties by extending onPaint implementation:
onPaint: { //... // fill: ctx.beginPath(); ctx.moveTo(0, 0); var i; for(i = 0; i < pointsToDraw.length; i++) { ctx.lineTo(i, -pointsToDraw[i] * canvas.height/2); } ctx.lineTo(i, 0); var gradient = ctx.createLinearGradient( 0, -canvas.height / 2, 0, canvas.height / 2); gradient.addColorStop(0.1, ...
