Stencil mask for clipping not working in Safari



I am using a stencil mask for clipping. It is working fine in Chrome but in Safari it does not seem to work. What I am doing is creating the stencil and adding to it as I build up my level. Basically I am adding squares to the stencil to build up a used grid area. Below is the code I am using. In Chrome all is working fine but in Safari it only seems to use the very last area I add to the stencil.

initializeClipper:function () {
    this.stencil = cc.DrawNode.create();
    this.clipper = cc.ClippingNode.create();

addClippingArea:function (x1, y1, x2, y2) {
    var triangle = [cc.p(x1,y1),cc.p(x2, y1), cc.p(x2, y2), cc.p(x1,y2)];
    var green = cc.c4f(1, 1, 1, 1);
    this.stencil.drawPoly(triangle, green, 4, green);

addClippingPlane:function () {
    this.stencil.setPosition(0, 0);
    this.clipper.setAnchorPoint(0.5, 0.5);
    this.clipper.setPosition(0,0);//winSize.width / 2, winSize.height / 2);


Hello! Did You Find a solution of this problem?