ChartJS canvas not displaying rgba colors in IE, Safari and Firefox : <p>Im using ChartJS to display some data but it's not rendering the canvas element correctly in IE, Firefox and Safari. </p>

<p>My guess is that the background color property lacks any of the used prefixes for the other browser since it works fine in Chrome.</p>

<p>Anyone else had this issue? </p>

<p><strong>Chrome</strong>: </p>

<p><a href="https://i.stack.imgur.com/WXPgx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WXPgx.png" alt="enter image description here"></a></p>

<p><strong>Firefox, Safari and IE:</strong>
<a href="https://i.stack.imgur.com/ZtW4T.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ZtW4T.png" alt="enter image description here"></a></p>

<p>The code: </p>

<pre><code>    window.onload = function() {
        var ctx = document.getElementById("canvas");
        var myChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug"],
                datasets: [{
                    label: '# of Value',
                    data: [12, 19, 3, 5, 2, 3, 10, 29],
                    backgroundColor: [
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)'
                    ],
                    borderColor: [
                        'rgba(33, 145, 81, 1)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)',
                        'rgba(33, 145, 81, 0.2)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero:true
                        }
                    }]
                }
            }
        });
    };
    });
</code></pre>
