How to use HTML5 Canvas rounded corner

This article describe about HTML5 Canvas rounded corner.
  • 2545

HTML5 canvas rounded corner

HTML5 canvas rounded corner is use arcTo() method, which is define by control point and a radius in rounded corner.

Syntax

<script>       context.arcTo(controlX,controlY,endX,endY,radius);
</script>

Example

<!DOCTYPE HTML>

<html>

  <head>

    <style>

      body

{

        margin: 0px;

        padding: 0px;

      }

      #myCanvas

{

        border: 1px solid #9C9898;

      }

    </style>

    <script>

        window.onload = function ()

{

            var canvas = document.getElementById("myCanvas");

            var context = canvas.getContext("2d");

            var rectWidth = 160;

            var rectHeight = 80;

            var rectX = 151;

            var rectY = 40;

            var cornerRadius = 40;

 

            context.beginPath();

            context.moveTo(rectX, rectY);

            context.lineTo(rectX + rectWidth - cornerRadius, rectY);

            context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);

            context.lineTo(rectX + rectWidth, rectY + rectHeight);

            context.lineWidth = 5;

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="myCanvas" width="400" height="180"></canvas>

  </body>

</html>

 

Output

rounded.jpg

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.