[BUG] Retina scaling no longer working in 2.4.0 (master branch)

[Driklyn]

Testing out the latest using the master branch (since I needed a new feature) and now my charts are twice as big and blurry.

I believe it is related to this commit.

Expected Behavior

Using a width/height of 640x480, a canvas is created like so:

<canvas width="1280" height="960" style="display: block; width: 640px; height: 480px;"></canvas>

Current Behavior

With responsive set to false, the canvas is created as:

<canvas width="1280" height="960" style="display: block;"></canvas>

With responsive set to true, the canvas is created as:

<canvas width="2560" height="1920" style="display: block; width: 1280px; height: 960px;"></canvas>

[simonbrunel]

Can you drop an example (HTML + JavaScript), here or in a jsFiddle?

[Driklyn]

Any example should do the trick (such as using the Getting Started example in the documentation). I would put together a JSFiddle but I don't think I can have it use 2.4.0 since it isn't released yet. If this is possible, let me know and I certainly will!

But here are a couple screenshots:

Using 400x400 with responsive set to false:

With responsive set to true:

Both charts appear as 800x800 and are twice as big as they should be.

[Driklyn]

Yep, the Getting Started example will work.

[simonbrunel]

You right, it's broken since this commit change. I just didn't think about that retina case when only the canvas width/height are set. The proper way to size a chart (IMO) is to set the canvas style only: <canvas style="width: 640px; height: 480px"></canvas> in which case it should work as expected. Of course, the reported case needs to be fixed!

[simonbrunel]

However, do we agree that the responsive: true case is correct?

[Driklyn]

Ah, setting the width/height in style does indeed solve the issue! Thanks.

And yup, the responsive: true case is correct.

[simonbrunel]

@Driklyn can you please pull latest master and confirm that it's fixed?

[Driklyn]

Yep, looks good now whether you're using <canvas width="640" height="480"></canvas> or <canvas style="width: 640px; height: 480px"></canvas>.

Thanks for the quick fix! 👍

[etimberg]

thanks @Driklyn for verifying this