HTML5 Game - Canvas Using arcTo()

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Arc

Description

Using arcTo()

Demo

ResultView the demo in separate window 

<!DOCTYPE html>

<html>

<head>
    <title>Rounded Rectangles</title>
    <style>
        #canvas {//from  w ww.j a  v a2 s. c  o m
            background: lightskyblue;
        }
    </style>
</head>

<body>
    <canvas id='canvas' width='575' height='200'>
        Canvas not supported
    </canvas>
    <script>
        let context = document.getElementById('canvas').getContext('2d');

        function roundedRect(cornerX, cornerY, width, height, cornerRadius) {
            if (width > 0) context.moveTo(cornerX + cornerRadius, cornerY);
            else context.moveTo(cornerX - cornerRadius, cornerY);

            context.arcTo(cornerX + width, cornerY,
                cornerX + width, cornerY + height,
                cornerRadius);

            context.arcTo(cornerX + width, cornerY + height,
                cornerX, cornerY + height,
                cornerRadius);

            context.arcTo(cornerX, cornerY + height,
                cornerX, cornerY,
                cornerRadius);

            if (width > 0) {
                context.arcTo(cornerX, cornerY,
                    cornerX + cornerRadius, cornerY,
                    cornerRadius);
            } else {
                context.arcTo(cornerX, cornerY,
                    cornerX - cornerRadius, cornerY,
                    cornerRadius);
            }
        }

        function drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY, width, height, cornerRadius) {
            context.beginPath();

            roundedRect(cornerX, cornerY, width, height, cornerRadius);

            context.strokeStyle = strokeStyle;
            context.fillStyle = fillStyle;

            context.stroke();
            context.fill();
        }

        drawRoundedRect('blue', 'yellow', 50, 40, 100, 100, 10);
        drawRoundedRect('purple', 'green', 275, 40, -100, 100, 20);
        drawRoundedRect('red', 'white', 300, 140, 100, -100, 30);
        drawRoundedRect('white', 'blue', 525, 140, -100, -100, 40);
    </script>
</body>

</html>

Related Topic