jonessieka / explorercanvas

Automatically exported from code.google.com/p/explorercanvas
Apache License 2.0
0 stars 0 forks source link

"The Nonzero Winding Rule" does not apply #97

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
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