Chart.js 図全体背景色、グラフエリア背景色、イメージダウンロードの問題を解決する

Chart.js を使用して canvas に描画するグラフは、canvas の中のグラフエリアだけは、
以下 stackoverflow の返答にあるように、描画前に実行する関数プラグインを書き
option の chartArea で backgroundColor を指定すれば、グラフエリアだけは背景色が適用できる。
javascript - Chart area background color chartjs - Stack Overflow

Chart.js プラグインへの登録:beforeDraw (描画前に実行する関数)を記述して

Chart.pluginService.register({
    beforeDraw: function(c){
        if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
            var ctx = c.chart.ctx;
            var chartArea = c.chartArea;
            ctx.save();
            ctx.fillStyle = c.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

この後で、canvas にグラフを描画する処理で指定する option の中で、chartArea に backgroundColor を指定する。

var options = {
    responsive: true,
    title:{ display:true,
        text:'Chart sample'
    },
    // グラフエリアのオプション
    chartArea: {
        backgroundColor: 'rgba(230, 238, 255, 0.6)'
    },
    scales: {
        xAxes: [{ display: true,
            scaleLabel: { display: true, labelString: 'Days' }
        }],
        yAxes: [{ display: true,
            scaleLabel: { display: true, labelString: 'Value' },
            ticks: { min: 0, max: 100, stepSize: 20 }
        }]
    },
};

var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: graph,
    options: options
});

canvas 全体の背景色を指定することをしたい場合。。
Chart.js はbackgrondColor 指定して塗りつぶす fill() fillRectangle() メソッドも組み込まれていないため、
以下のように、csnvas の context への CSS で指定することになる。

var canvas = document.getElementById("myChart");
canvas.style.backgroundColor = "rgba(255, 255, 220, 1)";
var ctx = canvas.getContext('2d');

var myChart = new Chart(ctx, {
    type: 'line',
    data: graph,
    options: options
});

しかしこれでは、このcanvas画像をダウンロードすれば判るが、
グラフエリアの外側の背景色は透過されたままだ。

外側の背景色を画像への変換(toDataURL()の使用)でも適用させるためには、
この方法ではなくて、上に書いた beforeDraw 関数プラグイン登録の記述で、書くべきだ。
背景色とグラフエリアの両方に各々の背景色を
指定しダウンロード画像にも適用させるには、、

Chart.pluginService.register({
    beforeDraw: function(c){
        if (c.config.options.chartArea && c.config.options.chartArea.backgroundColor) {
            var ctx = c.chart.ctx;
            var chartArea = c.chartArea;
            ctx.fillStyle = "rgba(153, 255, 221, 1)";           // 外側背景色の指定
            ctx.fillRect(0, 0, c.chart.width, c.chart.height);  // 外側背景色描画
            ctx.save();
            ctx.fillStyle = c.config.options.chartArea.backgroundColor;
            ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
            ctx.restore();
        }
    }
});

背景色だけを指定する場合は、

Chart.plugins.register({
    beforeDraw: function(c){
        var ctx = c.chart.ctx;
        ctx.fillStyle = "rgba(153, 255, 221, 1)";
        ctx.fillRect(0, 0, c.chart.width, c.chart.height);
    }
});

ということになる。
すると、canvas から getContext して、new Chart の記述はマニュアルどおり

var canvas = document.getElementById("myChart");
var ctx = canvas.getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line',
    data: graph,
    options: options
});

canvas 画像ダウンロードは、chrome では以下の方法ができる。IEではダメた。

例)id="createImg" のボタンclick で。

$('#createImg').click(function(){
    var png = document.getElementById('myChart').toDataURL();
    var a = document.createElement('a');
    var e = document.createEvent('MouseEvent');
    // 保存するファイル名
    a.download = "sample.png";
    a.href = png;
    e.initEvent("click", true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
});