JSFiddle - React, Tailwind, and code Playground

by jaibuu

HTML

<canvas id="canvas" width=400 height=300></canvas>

CSS

body {
            background-color: ivory;
        }
        canvas {
            border:1px solid red;
        }

JavaScript

var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");

            drawPolygon(5, 100, 200, 150, 2, "gray", "pink", -90);

            drawPolygon(5, 100, 200, 150, 2, "gray", "white", 45);


            function drawPolygon(sideCount, size, centerX, centerY, strokeWidth, strokeColor, fillColor, rotationDegrees) {
                var radians = rotationDegrees * Math.PI / 180;
                ctx.save();
                ctx.translate(centerX, centerY);
                ctx.rotate(radians);
                ctx.beginPath();
                ctx.moveTo(size * Math.cos(0), size * Math.sin(0));
                for (var i = 1; i <= sideCount; i += 1) {
                    ctx.lineTo(size * Math.cos(i * 2 * Math.PI / sideCount), size * Math.sin(i * 2 * Math.PI / sideCount));
                }
                ctx.fillStyle = fillColor;
                ctx.strokeStyle = strokeColor;
                ctx.lineWidth = strokeWidth;
                ctx.stroke();
                ctx.fill();
                ctx.restore();
            }