Trial weighted alpha values when layering data

[js1300]

For example, on a graph with 20 datasets and an alpha of 0.5:

1st drawn layer alpha = 0.5 * 1/20 =
Last drawn layer alpha = 0.5 * 20/20 = 0.5

The goal is to avoid a "brown, mushy" colour under the graph.

[js1300]

As an alternative to this, I would like to trial filling the area under the graph with background colour immediately before filling it with the data colour. There are caveats, though:

• the drawing loop will need to be split in to two loops (one for drawing the area under the lines, one for drawing the lines)
• in addition to the point above, this splitting will need to happen for both the Y and U datasets
• in addition to the two points above, all areas under the lines (Y and U) need to drawn before all lines (Y and U)
• this needs to tested with backgrounds with an alpha value below one

[js1300]

When a solution is in place, experiment with area under graph gradient drawing once more. Currently, the entire extent of the graph is used for creating the gradient stops. It would be better (and, in turn, may look better) if the individual dataset limits (scaled in the case of the U axis) were used.

    createGraphFill(colour, colourStop, alpha, extentY) {
        var graphFill = null;
        if (this.graphGradientHorizontal) {
            graphFill = this.backgroundContext.createLinearGradient(this.graphStartX, 0, this.graphEndX, 0);
        } else {
            graphFill = this.backgroundContext.createLinearGradient(0, extentY, 0, this.graphEndY);
        }
        graphFill.addColorStop(0, this.grapheneHelper.hex2rgba(colour, alpha));
        if (this.graphGradientColour) {
            graphFill.addColorStop(1, this.grapheneHelper.hex2rgba(colourStop, alpha));
        } else {
            graphFill.addColorStop(1, this.grapheneHelper.hex2rgba(colour, 0));
        }
        return graphFill;
    }

    drawAreaUnderGraph(dataset, colour, colourStop, scale) {
        var extentY = Math.max(...dataset) * scale;
        this.backgroundContext.fillStyle = this.createGraphFill(colour, colourStop, this.alphasUnderGraph, extentY);