Adjust the size of rectRounded/rectRot points to fit the circle with pointRadius

[nagix]

Most of the pointStyle shapes are inscribed in the circle that has the radius of pointRadius, but 'roundedRect' and 'rectRot' shapes are inscribed in the rectangle that is inscribed in the circle and they look relatively smaller than others. To achieve more consistent appearance, this PR adjusts the size of those shapes to fit the circle.

This PR also fix the regression introduced by #5319 by removing ctx.translate() and ctx.rotate(), and calculating the absolute coordinates of each rendering point.

Chart.js 2.7.3: https://jsfiddle.net/nagix/ye9kcxaf/

This PR: https://jsfiddle.net/nagix/6rnfspu3/

For 'roundedRect', the corner radius is calculated using a new factor of 0.516 which is derived from the following:

Regarding the performance impact, I performed a benchmark using 50,000 random points on my MacBook and Dell laptop. The following charts show the difference from v2.7.3. The rendering time doesn't increase in most of the symbols except for 'rect' with rotation and 'rectRot'. The performance is even better with Chrome in particular.

https://jsfiddle.net/nagix/4nkucft6/

Fixes #5839

[simonbrunel]

@nagix awesome!

I'm wondering if we could refactor the rectRounded implementation in helpers.canvas.rectRounded() without breaking #5597. Regarding performances, drawing rotated rectangles on Safari is really slow (and slow on Firefox) compared to the previous version but I guess it's acceptable?! Results in Chrome looks a bit dubious since I think Chrome uses GPU to transform coordinates so it's strange that we are ~2 times faster doing it manually.

Could you also compare performance in IE11 and Edge? And out of curiosity, what's the Chart.min.js size before and after this PR?

[nagix]

I have added the benchmark results using Chrome, FireFox, IE11 and Edge on Windows 10 PC. The performance is improved for all the tests. Interestingly, there is also huge improvement in Chrome on Windows. It seems that Chrome has some performance problem in translate() implementation.

The size of Chart.min.js increases from 159,958 to 160,152 bytes.

[benmccann]

It would be good to add a comment to the code explaining it or linking to this PR. If I read the code alone without reading the description in this PR I would not be able to follow it or understand where .516 comes from, etc.

[nagix]

I have refactored rectRounded as well. I removed epsilon as the proposed code checks if the width and height are equal to the radius, and optimizes arc calls.

[nagix]

I have also added a reference to this PR and #5597 to the comment.

[simonbrunel]

Thanks @nagix for the extra benchmarks.

I like the new rectRounded implementation. I verified that it doesn't break chartjs-plugin-datalabels and it's fine (however, I found another unrelated issue). I thought you would have call rectRounded from drawPoint (as before) but I think it doesn't worth it since you would have to also pass the rotation, so let's keep it like you did.

[nagix]

I thought you would have call rectRounded from drawPoint (as before) but I think it doesn't worth it since you would have to also pass the rotation, so let's keep it like you did.

Yes, for the best performance, I decided not to call rectRounded from drawPoint.

[simonbrunel]

Thanks @nagix