Salida (barras de columna) de Chart.js borrosa en el browser Opera?

Versión Opera: 32.0.1948.69 (la salida funciona bien en otros browseres principales).

¿Alguien sabe cómo podría posiblemente corregir la borrosidad de Chart.js?

El ancho del gráfico no es relevante aquí, no importa qué dimesiones tomo siempre tiene un nivel de visión borrosa (especialmente cuando se cierne sobre la columna) que me gustaría eliminar.

Imagen :

enter image description here

Ejemplo de Fiddle : https://jsfiddle.net/eugensunic/1sg79n7x/1/

Código de violín:

var array= [100, 59, 80, 333, 56, 55, 40] var data = { labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { label: "My First dataset", fillColor: "rgba(220,220,220,0.5)", strokeColor: "rgba(220,220,220,0.8)", highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", data: array } ] }; var options = { animation: true }; var ctx = document.getElementById("myChart").getContext("2d"); myNewChart = new Chart(ctx).Bar(data, options); 

EDITAR: Comparación de imágenes entre Chrome y Opera. enter image description here

Necesita agregar algunas líneas de properties de CSS para optimizar la representación de imágenes para Opera, tal como se explica aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering y se ve a continuación.

 canvas#myChart { image-rendering: optimizeSpeed; /* Older versions of FF */ image-rendering: -moz-crisp-edges; /* FF 6.0+ */ image-rendering: -webkit-optimize-contrast; /* Webkit (non standard naming) */ image-rendering: -o-crisp-edges; /* OS X & Windows Opera (12.02+) */ image-rendering: crisp-edges; /* Possible future browsers. */ -ms-interpolation-mode: nearest-neighbor; /* IE (non standard naming) */ } 

Podría intentar renderizarlo como un png así:

 myLineChart.toBase64Image(); 

Por supuesto, esto lo haría estático, por lo que podría no ser la mejor respuesta.