Canvas How to - Draw round corner rectangle

Question

We would like to know how to draw round corner rectangle.

Answer


<!--from w ww  . j av a  2s .  c om-->



<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    function fillArc(camvas,x,y,w,h)
    {
        var canv = document.getElementById(camvas);
        var context = canv.getContext('2d');
        context.beginPath();
        context.strokeStyle="#000000";
        context.moveTo(x+5,y);
        context.lineTo(w-5,y);
        context.quadraticCurveTo(w,y,w,y+5);
        context.lineTo(w,h-5);
        context.quadraticCurveTo(w,h,w-5,h);
        context.lineTo(x+5,h);  
        context.quadraticCurveTo(x,h,x,h-5);
        context.lineTo(x,y+5);
        context.quadraticCurveTo(x,y,x+5,y);
        context.stroke();
        context.closePath();
    }
    fillArc("canvaslayouts",10,10,50,50);
}//]]>  
</script>
</head>
<body>
  <canvas width="500" height="500" id="canvaslayouts">
</canvas>
</body>
</html>

The code above is rendered as follows: