function polygon(c,n,x,y,r,angle,counterclockwise) {
//c.beginPath();
angle = angle || 0;
counterclockwise = counterclockwise || false;
// Compute vertex position and begin a subpath there
c.moveTo(x + r*Math.sin(angle),
y - r*Math.cos(angle));
var delta = 2*Math.PI/n; // Angle between vertices
for(var i = 1; i < n; i++) { // For remaining vertices
// Compute angle of this vertex
angle += counterclockwise?-delta:delta;
// Compute position of vertex and add a line to it
c.lineTo(x + r*Math.sin(angle),
y - r*Math.cos(angle));
}
c.closePath(); // Connect last vertex back to the first
}
function drawCanvas() {
// Get first canvas element and its context
var canvas = document.getElementById("square");
var context = canvas.getContext("2d");
context.beginPath();
polygon(context, 6, 365, 53, 50, Math.PI/6);
polygon(context, 4, 365, 53, 20, Math.PI/4);
context.fillStyle = "#ccc";
context.strokeStyle = "#008";
context.lineWidth = 5;
context.fill(); // Fill the path
context.stroke();
}
If we test it under Chrome, th centor square is filled, unless we draw the
centor square counter clockwise. But under IE, it is un-filled
Original issue reported on code.google.com by gokil...@gmail.com on 26 Jan 2011 at 10:25
Original issue reported on code.google.com by
gokil...@gmail.com
on 26 Jan 2011 at 10:25