Output (column bars) from Chart.js blurry in Opera browser?

Question

Opera Version: 32.0.1948.69 (the output works fine on other major browsers).

Does anyone know how could I possibly fix the blurriness from Chart.js?

The width of the chart isn't relevant here, no matter which dimesions I take it always has a level of blurriness (especially when hovering over the column) which I would like to eliminate.

Image:

Fiddle example: https://jsfiddle.net/eugensunic/1sg79n7x/1/

Fiddle code:

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

EDIT: Picture comparison between Chrome and Opera.

Flautist

I don't see a blurry chart in Firefox, Chrome, or IE11. Also, you can't link to the chart.js file from the website; use a CDN such as cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js - here's an updated jsFiddle: jsfiddle.net/1sg79n7x/2 – Anzus

Sorry for the late response. I'm using opera (stable version). It works very well in the browsers that you've specified above. Opera fails. I've added the chart.min.js and removed the old one, still the problem is there. – Flautist

Which version of Opera? – Anzus

Could this possibly be a CSS problem with it trying to render the image (I'm guessing canvas) larger than its native size? – Tessietessier

Also, check your zoom level in Opera. – Tessietessier

assume that you've tried the css related fixes such as github.com/nnnick/Chart.js/issues/56 – Grefe

Version: 32.0.1948.69, @SeanKendle, I've tried everything and it does't work. – Flautist

@PeterScott doesn't help. – Flautist

@eugensunic - I checked the fiddle on Opera (the version you mentioned) and compared it to Chrome (both on Desktop). Couldn't see any noticeable difference(yep, I didn't forget my glasses :-)). If it's not too much trouble could you add an image from Chrome for comparison when you get the chance. Also not exactly seeing the blurriness in the current image. – Organogenesis

See post edit. You can clearly see that there is a bluriness. If this problem can not be solved I will switch to google-charts. The fiddle is the same in both cases. – Flautist

@eugensunic Does this seem any better: jsfiddle.net/1sg79n7x/4 ? – Anzus

@TiesonT. Why don't you post that as an answer and reward yourself with 50++ – Flautist

@eugensunic Because I'm still not sure if it's the webkitImageSmoothingEnabled that is affecting the graph, or the automatic resizing from responsive: true; I'd rather someone keep digging to see what Opera is doing differently with <canvas> elements. Since they switched to Webkit, it should function similar to Safari and (more or less) Chrome. – Anzus

@TiesonT. to be honest with you (although I always like to know why and understand 100% what's behind) I'm really glad this agony finished because I'm late with a project and needed to fix this up ... You can post an answer with bot of the specified it doesn't matter. Thank you for you time really would like this 50 to go to you. – Flautist

Answer 1

You need to add a few lines of CSS properties to optimize image rendering for Opera as explained here: https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering and seen below.

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

Plumule

Answer 2

You could try rendering it as a png like so:

myLineChart.toBase64Image();

Of coarse this would make it static so It might not be the best answer.

Anglaangle