HTML5 Game - Drawing Polygons with Paths

Description

Drawing Polygons with Paths
Demo

<!DOCTYPE html>
<html>

<head>
    <style>
        #canvas {/*from   w  w w .  j av  a  2 s. c o  m*/
            border: 1px solid #03F;
        }
    </style>
    <script>
        // Global variables for the canvas and context 
        let canvas;
        let context;

        // initialization function when the page loads 
        function init() {

            // set the button handler 
            let btnDrawPolygon = document.getElementById('drawPolygon');
            btnDrawPolygon.addEventListener('click', drawPolygon, false);

            // set references to the canvas and context 
            canvas = document.getElementById('canvas');
            context = canvas.getContext('2d');
        }

        // function to draw the polygon on the canvas 
        function drawPolygon() {

            // Retrieve the user input for the polygon 
            let numSides = document.getElementById('numSides').value;
            let radius = document.getElementById('radius').value;
            // Get our canvas center point to center the polygon 
            let xCenter = parseInt(canvas.width / 2);
            let yCenter = parseInt(canvas.height / 2);

            // Clear the canvas 
            context.clearRect(0, 0, canvas.width, canvas.height);

            // Begin our path 
            context.beginPath();

            // Map the first vertice to start with 
            let xPos = xCenter + radius * Math.cos(2 * Math.PI * 0 / numSides);
            let yPos = yCenter + radius * Math.sin(2 * Math.PI * 0 / numSides);
            context.moveTo(xPos, yPos);

            // Loop through the vertices and map the lines 
            for (i = 1; i <= numSides; i++) {

                // Determine the coordinates of the next vertex 
                xPos = xCenter + radius * Math.cos(2 * Math.PI * i / numSides);
                yPos = yCenter + radius * Math.sin(2 * Math.PI * i / numSides);

                // Set line to the next vertex 
                context.lineTo(xPos, yPos);
            }

            // Close our path of lines 
            context.closePath();

            // Set the line properties and draw the lines 
            context.lineWidth = 30;
            context.lineJoin = 'round';
            context.stroke();

            // Fill our new polygon 
            context.fillStyle = '#00F';
            context.fill();
        }

        // call the init function on page load 
        window.addEventListener('load', init, false);
    </script>
</head>

<body>
    <h1>Canvas Path Usage:</h1>
    <canvas id="canvas" width="400" height="400">
        The canvas element is not supported in your browser.
    </canvas>
    <br>
    Number of Sides: <input type="number" id="numSides" min="3" step="1" value="7" /><br>
    Radius: <input type="number" id="radius" min="10" step="1" value="150" /><br>
    <button id="drawPolygon">Draw Polygon</button>
</body>

</html>
HTML5 Game - Drawing Polygons with Paths

Description

Demo

Related Topic
