The roundRect function

• Arguments to the function
• An example

The roundRect function is used to draw a rectangle to the canvas which has rounded corners. Nothing is actually drawn to the canvas until you call either the stroke or fill function.

Arguments to the function

• The x-axis coordinate (of the top left of the rectangle)
• The y-axis coordinate (of the top left of the rectangle)
• The width of the rectangle
• The height of the rectangle
• Either a number or an array of numbers controlling the extent of the rounding. This can be:
  • A single number. This number is used as the rounding radius for all four corners.
  • An array containing a single number. This number is used as the rounding radius for all four corners.
  • An array of two numbers. In this case the first number stipulates the rounding radius for the top-left/bottom-right corners and the second number stipulates the rounding radius for the top-right/bottom-left corners.
  • An array of three numbers. In this case the first number controls the rounding radius for the top-left corner. The second number controls the radius for the top-right and bottom-left corners. And the third number controls the radius of the bottom-left corner.
  • An array of four numbers. In this case each number controls the rounding of each corner - top-left, top-right, bottom-right and bottom-left.

An example

<script>
    window.onload = function ()
    {
        var canvas  = document.getElementById("cvs");
        var context = canvas.getContext('2d');

        context.beginPath();
        context.roundRect(50, 50, 100, 100, 10);
        context.roundRect(200, 50, 100, 100, [10]);
        context.roundRect(350, 50, 100, 100, [10,20]);
        context.roundRect(500, 50, 100, 100, [10,20,30]);
        context.roundRect(650, 50, 100, 100, [10,20,30,40]);
        context.stroke();
    }
</script>