# Edit in JSFiddle

```function Vector2D(x, y) {
this.x = x;
this.y = y;
}

Vector2D.prototype.rotate = function (radians, counterclockwise) {
var direction = (typeof counterclockwise === 'undefined') ? true : counterclockwise,
tmpX = this.x,
tmpY = this.y;

//this is using the rotation matrix |  cos(rads) sin(rads) |
//
//it might be the incorrect matrix to use...

if (direction) {
this.x = (Math.cos(radians) * tmpX) + (-Math.sin(radians) * tmpY);
this.y = (Math.sin(radians) * tmpX) + (Math.cos(radians) * tmpY);
} else {
this.x = (Math.cos(-radians) * tmpX) + (-Math.sin(-radians) * tmpY);
this.y = (Math.sin(-radians) * tmpX) + (Math.cos(-radians) * tmpY);
}
};

function Polygon2D(initEndPoints) {
this.endpoints = initEndPoints || [];
this.centerPoint = this._center();
}

Polygon2D.prototype._center = function () {
var sumX = 0,
sumY = 0,
center = new Vector2D(0, 0);

//add up all of the x values and y values
for (var i = 0; i < this.endpoints.length; i++) {
sumX += this.endpoints[i].x;
sumY += this.endpoints[i].y;
}

//the center is the average of the coordinates
center.x = sumX / this.endpoints.length;
center.y = sumY / this.endpoints.length;

return center;
};

Polygon2D.prototype.render = function (ctx) {

//start this polygon
ctx.beginPath();

ctx.fillStyle = 'blue';

//move to the starting position
ctx.moveTo(this.endpoints[0].x, this.endpoints[0].y);

//draw lines through all of the points
for (var i = 0; i < this.endpoints.length; i++) {
ctx.lineTo(this.endpoints[i].x, this.endpoints[i].y);
}

//...and close this polygon
ctx.lineTo(this.endpoints[0].x, this.endpoints[0].y);

//fill or stroke the polygon?
//(fill) ? ctx.fill() : ctx.stroke();
ctx.fill();

//draw center
ctx.beginPath();
ctx.fillStyle = 'green';
ctx.arc(this.centerPoint.x, this.centerPoint.y, 3, 0, 2 * Math.PI, false);
ctx.fill();
};

Polygon2D.prototype.rotate = function (radians, counterclockwise) {
for (var i = 0; i < this.endpoints.length; i++) {

//translate to this polygon's center point
this.endpoints[i].x = this.endpoints[i].x - this.centerPoint.x;
this.endpoints[i].y = this.endpoints[i].y - this.centerPoint.y;

//rotate this point

//translate back to rendering origin
this.endpoints[i].x += this.centerPoint.x;
this.endpoints[i].y += this.centerPoint.y;
}
};

/////////////////////////// DEMO PART ///////////////////////////
var canvas = document.getElementById('playground'),
ctx = canvas.getContext('2d'),
demoEndPoints = [],
poly;

demoEndPoints.push(new Vector2D(100, 50));
demoEndPoints.push(new Vector2D(150, 68));
demoEndPoints.push(new Vector2D(184, 101));
demoEndPoints.push(new Vector2D(110, 178));
demoEndPoints.push(new Vector2D(98, 205));

poly = new Polygon2D(demoEndPoints);

poly.render(ctx);

canvas.addEventListener('mousemove', function (ev) {
var dCenterPoint = 0,
dCenterMouse = 0,
dMousePoint = 0,
angle = 0,
prevMouseX = 0,
prevMouseY = 0;

//get dist between center and endpoint
dCenterPoint = Math.abs(Math.sqrt(((poly.endpoints[0].x - poly.centerPoint.x) * (poly.endpoints[0].x - poly.centerPoint.x)) + ((poly.endpoints[0].y - poly.centerPoint.y) * (poly.endpoints[0].y - poly.centerPoint.y))));

//get dist between center and mouse
dCenterMouse = Math.abs(Math.sqrt(((ev.clientX - poly.centerPoint.x) * (ev.clientX - poly.centerPoint.x)) + ((ev.clientY - poly.centerPoint.y) * (ev.clientY - poly.centerPoint.y))));

//get dist between mouse and endpoint
dMousePoint = Math.abs(Math.sqrt(((ev.clientX - poly.endpoints[0].x) * (ev.clientX - poly.endpoints[0].x)) + ((ev.clientY - poly.endpoints[0].y) * (ev.clientY - poly.endpoints[0].y))));

//use law of cosines to get angle
angle = Math.acos(((dCenterPoint * dCenterPoint) + (dCenterMouse * dCenterMouse) - (dMousePoint * dMousePoint)) / (2 * dCenterPoint * dCenterMouse));

//rotate polygon by angle
poly.rotate(angle);

ctx.clearRect(0, 0, canvas.width, canvas.height);

poly.render(ctx);

}, false);```
`<canvas id='playground' width='300' height='300'>Your browser must support html5 canvas element</canvas>`