Rounded corners not rendering correctly on HTML5 canvas

Does anyone know why the rounded corners look wrong?

ctx.beginPath();
        ctx.moveTo(x + this.cornerRadius, y);
        ctx.lineTo(x + thisWidth - this.cornerRadius, y);
        ctx.quadraticCurveTo(x + thisWidth, y, x + thisWidth, y + this.cornerRadius);
        ctx.lineTo(x + thisWidth, y + thisHeight - this.cornerRadius);
        ctx.quadraticCurveTo(x + thisWidth, y + thisHeight, x + thisWidth开发者_StackOverflow - this.cornerRadius, y + thisHeight, this.cornerRadius);
        ctx.lineTo(x + this.cornerRadius, y + thisHeight);
        ctx.quadraticCurveTo(x, y + thisHeight, x, y + this.height - this.cornerRadius);
        ctx.lineTo(x, y + this.cornerRadius);
        ctx.quadraticCurveTo(x, y, x + this.cornerRadius, y);
  ctx.closePath();

canvas = document.getElementById('a');
ctx = canvas.getContext('2d');
function roundedRect(x,y,w,h,radius){
    ctx.moveTo(x+radius,y);
    ctx.lineTo(x+w-radius,y);
    ctx.arcTo(x+w,y,x+w,y+radius,radius);
    ctx.lineTo(x+w,y+h-radius);
    ctx.arcTo(x+w,y+h,x+w-radius,y+h,radius);
    ctx.lineTo(x+radius,y+h);
    ctx.arcTo(x,y+h,x,y+h-radius,radius);
    ctx.lineTo(x,y+radius);
    ctx.arcTo(x,y,x+radius,y,radius);    
    ctx.stroke();
}
roundedRect(100,50,100,100,10);

The arcTo method was created for these kinds of purposes. Read about the arcTo method here. (MDN doesn't have very good documentation or examples on it) Demo here