JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="145px" height="145px"  ></canvas>

<p>An extension of the draw a polygon in html canvas answer <a href="http://stackoverflow.com/a/11354824/1112097">I submitted to StackOverflow</a> to show how to rotate the shame around its center.</p>

<p>Changing the rotation parameter will change the orientation of the shape. As written the rotation parameter is cacluated in radians. To enter rotation in degrees, uncomment line 11.</p>

JavaScript

var height = 145,
		width = 145,
		sideLen = 50,
		sideNumb = 5,
		rotation = 0, // in radians
		canvas = document.getElementById("canvas"),
		cxt = canvas.getContext("2d"),
		animate;

	// uncomment to enter rotation in degrees. 
	// rotation *= Math.PI/180;

	var xCenter = width/2,
		yCenter = height/2;

		cxt.beginPath();
    	cxt.moveTo (xCenter +  sideLen * Math.cos(rotation), yCenter +  sideLen *  Math.sin(rotation));           
    	for (var i = 1; i <= sideNumb; i += 1) {
        	cxt.lineTo (xCenter +  sideLen * Math.cos(rotation + (i * 2 * Math.PI / sideNumb)), yCenter +  sideLen *  Math.sin(rotation + (i * 2 * Math.PI / sideNumb)));
    	}
    	cxt.strokeStyle = "#000000";
    	cxt.lineWidth = 1;
    	cxt.stroke();