How can i improve my Html5 Canvas pathing Quality?

Question

I have been writing a little javascript plugin, and i am having a little trouble with improving the canvas overall quality of the render. I have searched over the web here a

Answer 1

Sorry I'm late to the party, but all of the answers here are overcomplicating things.

What you are actually seeing is the absence of gamma correction. Look at the Antialias 1&2 examples here: http://bourt.com/2014/ (you'll need to calibrate the gamma value for your monitor first), and this short explanation: https://medium.com/@alexbourt/use-gamma-everywhere-da027d9dc82f

The vectors are drawn as if in a linear color space, while the pixels exist in a gamma-corrected space. It's that simple. Unfortunately, Canvas has no gamma support, so you're kind of stuck.

There is a way to fix this, but you have to draw your stuff, then access the pixels directly and correct them for gamma yourself, like I did in those examples. Naturally, this is most easily done with simple graphics. For anything more complicated you need your own rendering pipeline which takes gamma into account.

(Because this argument invariably comes up, I'll address it now: it's better to err on the side of gamma than not. If you say "well, I don't know what the user monitor's gamma will be", and leave it at 1.0, the result WILL BE WRONG in almost all cases. But if you take an educated guess, say 1.8, then for a substantial percentage of users you will have guessed something close to what's correct for their monitor.)