Linear gradient width using percentage (%) instead of pixels (px)

I am using chart.js to make a graph with linear gradient :

<script src="js/Chart.min.js"></script>
<script type="text/javascript">
var ctx = document.getElementById('myChart').getContext('2d');

var grd = ctx.createLinearGradient(0, 0, canvas.width, 0);
grd.addColorStop(0.2, 'red');
grd.addColorStop(0.4, 'orange');
grd.addColorStop(0.78, 'limegreen');
grd.addColorStop(0.9, 'black');

var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'horizontalBar',

    // The data for our dataset
    data: {
        labels: ["Confort"],
        datasets: [
        {
            label: ["Confort actuel"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: 'rgba(0,0,0,0.2)',
            hoverBackgroundColor: 'rgba(0,0,0,0)',
            data: [64],     
        },
        {
            label: ["Confort projeté"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: grd,
            hoverBackgroundColor: grd,
            data: [120],
        },
        {
            label: ["Confort optimal"],
            borderWidth: 0,
            borderColor: 'rgba(0,0,0,1.0)',
            backgroundColor: 'rgba(205,205,205,1.0)',
            hoverBackgroundColor: 'rgba(205,205,205,1.0)',
            data: [100],
        },
        ]
    },

    // Configuration options go here
    options: {
        legend: {
            display: false,
        },
        scales: {
            xAxes: [{
                stacked:false,
                ticks: {
                    beginAtZero:true,
                    max: 130,
                    display: false,
                },
                gridLines : {
                    display: false,
                    drawBorder: false,
                },
            }],
            yAxes: [{
                display:false,
                stacked:true,
                barThickness: 20,
                gridLines: {
                    display: false,
                    drawBorder: false,
                }
            }],
        },
        tooltips: {
            enabled: false,
            callbacks: {
                label: function(tooltipItems, data) { 
                    return " " + tooltipItems.xLabel + "%";
                }
            }
        },
    }
});
Chart.pluginService.register({
    afterDraw: function(chartInstance) {
        var ctx = chartInstance.chart.ctx;

        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'right';
        ctx.textBaseline = 'center';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                if (dataset.label[i] == "Confort projeté") {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y + 21);
                    ctx.fillText("▲", model.x+6, model.y + 19);
                }
                else if  (dataset.label[i] == "Confort actuel") {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x-8, model.y - 14);
                    ctx.fillText("▼", model.x+6, model.y - 12);
                }
                else {
                    ctx.fillText(dataset.label[i] + " (" + dataset.data[i] + "%)", model.x+130, model.y - 14);
                    ctx.fillText("▼", model.x+6, model.y - 12);
                }
            }
        });
  }
});
</script>

As you can see, I tried using canvas.width for the gradient (instead of 1024, before). But it makes my canvas crash and I have no idea why...

Anyone can help me?

Thanks!