Nice ellipse on a canvas?

Question

Is it possible to create ovals/ellipses with nicer strokes that have not that \"blurred\" border similar to:

• http://www.html5canvastutorials.com/kineticjs/html

Answer 1

The short answer is no, sorry!

The specification does not comment on the anti-aliasing methods (or not) that browsers must use, so it will be disparate between browsers. Different editions of Chrome (especially if you use chrome beta or developer channel) flip flop on this all the time.

Some talk of codifying this in the specification has occurred before, but no action has been taken, except for images where there's now an option to turn off image smoothing (the context's imageSmoothingEnabled property). This in no way applies to paths, though.

One solution that unfortunately will only work in the most narrow of circumstances: If your ellipses are fixed, is to create them in Firefox (arguably the browser with the smoothest anti aliasing) and generate images from them, then draw with images on all the browsers.

In short, if you want pixel-identical shapes across all browsers, you'll have to use images, there is currently no other way.