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 and there but can not find anything that makes sense.

The lines created from my curves are NOT smooth, if you look at the jsfiddle below you will understand what I mean. It kind of looks pixelated. Is there a way to improve the quality? Or is there a Canvas Framework that already uses some method to auto improve its quality that I can use in my project?

My Canvas Render

Not sure if this helps but i am using this code at the start of my script:

var c = document.getElementsByClassName("canvas");    for (i = 0; i < c.length; i++) {     var canvas = c[i];     var ctx = canvas.getContext("2d");     ctx.clearRect(0,0, canvas.width, canvas.height);     ctx.lineWidth=1;   }  } 

Thanks in advance

Example of my Curve Code:

var data = { diameter: 250, slant: 20, height: 290 };  for (i = 0; i < c.length; i++) {   var canvas = c[i];   var ctx = canvas.getContext("2d");   ctx.beginPath();     ctx.moveTo( 150 + ((data.diameter / 2) + data.slant ), (data.height - 3) );     ctx.quadraticCurveTo( 150 , (data.height - 15), 150 - ((data.diameter / 2) + data.slant ), (data.height - 3));     ctx.lineTo( 150 - ((data.diameter / 2) + data.slant ), data.height );     ctx.quadraticCurveTo( 150 , (data.height + 5), 150 + ((data.diameter / 2) + data.slant ), data.height);   ctx.closePath();   ctx.stroke(); }