console
function Polygon(n,dx,dy,size,color){
this.n = n||5;
this.x = dx||50;
this.y = dy||50;
this.size = size||20;
this.color = color||'HotPink';
}
Polygon.prototype = {
stroke:function(cxt){
cxt.save()
cxt.beginPath();
cxt.strokeStyle=this.color
var degree = (2*Math.PI)/this.n;
for (var i=0;i<this.n;i++){
var x = Math.cos(i*degree)
var y = Math.sin(i*degree)
cxt.lineTo(x*this.size+this.x,y*this.size+this.y);
}
cxt.closePath();
cxt.stroke()
cxt.restore()
},
fill:function(cxt){
cxt.save()
cxt.beginPath();
cxt.fillStyle=this.color
var degree = (2*Math.PI)/this.n;
for (var i=0;i<this.n;i++){
var x = Math.cos(i*degree)
var y = Math.sin(i*degree)
cxt.lineTo(x*this.size+this.x,y*this.size+this.y);
}
cxt.closePath();
cxt.fill()
cxt.restore()
},
checkMouse:function(cxt,mouse){
return cxt.isPointInPath(mouse.x,mouse.y)
}
}
var c=document.getElementById("mycanvas");
var ctx=c.getContext("2d");
var mouse = {x:0,y:0}
c.onmousemove = function(ev){
var e = ev||event;
mouse.x = e.layerX;
mouse.y = e.layerY;
};
var arr =[];
var n = 6;
var x = 70;
var y = 75;
var test = new Polygon(6,70,75,50);
test.fill(ctx)
c.addEventListener("mousedown",function(){
if(test.checkMouse(ctx,mouse)){
document.addEventListener("mousemove",onMouseMove,false)
document.addEventListener("mouseup",onMouseUp,false)
}
},false);
function onMouseMove(){
ctx.clearRect(0,0,c.width,c.height);
var newTest = new Polygon(6,mouse.x,mouse.y,50)
newTest.fill(ctx)
}
function onMouseUp(){
document.removeEventListener("mouseup",onMouseUp,false)
document.removeEventListener("mousemove",onMouseMove,false)
}
<canvas id="mycanvas" width="1000" height="1000">