HTML5 Game - Canvas Rounded corners

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rectangle Methods

Introduction

To draw a rounded corner, use the arcto() function, which has five parameters: 

arcto(xBeginning, yBeginning, xEnd, yEnd, radius)

Here's more on these parameters:

ParameterMeaning
xBeginning X coordinate of the beginning of the corner arc
yBeginning Y coordinate of the beginning of the corner arc
xEnd X coordinate of the end of the corner arc
yEnd Y coordinate of the end of the corner arc
RadiusRadius of the corner arc

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html>

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

            //LAYOUT parameters.
            let xPos = 25;/*from w w w  .  j ava 2  s . c  om*/
            let yPos = 25;
            let width = 150;
            let height = 75;
            let radius = 30;

            //ATTRIBUTES of lines and arc.
            context.strokeStyle = "red";
            context.lineWidth = 20;
            context.lineCap = "square"
            context.shadowOffsetX = 3;
            context.shadowOffsetY = 3;
            context.shadowBlur = 5;
            context.shadowColor = "gray";

            //STARTING point.
            context.beginPath();
            context.moveTo(xPos, yPos);

            //TOP line path.
            context.lineTo(xPos + width - radius, yPos);

            //CORNER arc path.
            context.arcTo(xPos + width, yPos,
                xPos + width, yPos + radius, radius);

            //SIDE line path.
            context.lineTo(xPos + width, yPos + height);

            //DRAW image.
            context.stroke();
        }
    </script>
</head>

<body>

    <div style="width:200px;   height:125px;
                 margin:0 auto; padding:5px;">
        <canvas id="canvasArea" width="200" height="125" style="border:2px solid black">
            Your browser doesn't currently support HTML5 Canvas.
        </canvas>
    </div>
</body>

</html>

Related Topic