OperaブラウザでChart.jsの出力（列バー）がぼやけていますか？

Question

Operaバージョン：32.0.1948.69（出力は他の主要ブラウザで正常に動作します）

誰でもどのようにChart.jsのぼやけを修正できるか知っていますか？

私が取るディメンションにかかわらず、グラフの幅はここでは関係ありません（特に、その上にカーソルを置いたとき）、私は排除したいレベルのぼかしを持っています。

画像：

フィドル例：https://jsfiddle.net/eugensunic/1sg79n7x/1/

フィドルコード：

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); 

編集： クロムとOperaの画像比較。

Answer 1

あなたはそうのようなPNGとしてそれをレンダリング試みることができる：それが最良の答えではないかもしれないので、これはそれが静的になるだろう粗いの

myLineChart.toBase64Image(); 

。

Answer 2

ここで説明するように、Operaの画像レンダリングを最適化するには、いくつかの行のCSSプロパティを追加する必要があります。https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering以下をご覧ください。

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) */ 
}