Закругленные углы неправильно отображаются на холсте HTML5

Question

Кто-нибудь знает, почему закругленные углы выглядят неправильно?

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 - 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();

Answer 1

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);

Метод arcTo был создан для таких целей. Читайте о методе arcTo здесь . (У MDN нет хорошей документации или примеров) Демо здесь