canvas arc too pixelated

You probably were setting the width of your canvas using CSS. Altering the width of a canvas element in CSS stretches the pixels within the canvas

Eg.

<canvas style='width:400px;height:400px'></canvas>

Instead, you need to use the width and height properties of the canvas element itself to define how many pixels the canvas contains.

Correct way:

<canvas width='400px' height='400px'><canvas>