diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 
diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js
index abf5d02..14dcdbb 100644
--- a/src/core/graphics/webgl/utils/buildCircle.js
+++ b/src/core/graphics/webgl/utils/buildCircle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildCircle(graphicsData, webGLData)
+export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // need to convert points to a nice regular data
     const circleData = graphicsData.shape;
@@ -89,7 +90,7 @@
             );
         }
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 
diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js
index abf5d02..14dcdbb 100644
--- a/src/core/graphics/webgl/utils/buildCircle.js
+++ b/src/core/graphics/webgl/utils/buildCircle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildCircle(graphicsData, webGLData)
+export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // need to convert points to a nice regular data
     const circleData = graphicsData.shape;
@@ -89,7 +90,7 @@
             );
         }
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }
diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js
index 4d6862e..07d9672 100644
--- a/src/core/graphics/webgl/utils/buildLine.js
+++ b/src/core/graphics/webgl/utils/buildLine.js
@@ -10,12 +10,13 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function (graphicsData, webGLData)
+export default function (graphicsData, webGLData, webGLDataNativeLines)
 {
     if (graphicsData.nativeLines)
     {
-        buildNativeLine(graphicsData, webGLData);
+        buildNativeLine(graphicsData, webGLDataNativeLines);
     }
     else
     {

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 
diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js
index abf5d02..14dcdbb 100644
--- a/src/core/graphics/webgl/utils/buildCircle.js
+++ b/src/core/graphics/webgl/utils/buildCircle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildCircle(graphicsData, webGLData)
+export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // need to convert points to a nice regular data
     const circleData = graphicsData.shape;
@@ -89,7 +90,7 @@
             );
         }
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }
diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js
index 4d6862e..07d9672 100644
--- a/src/core/graphics/webgl/utils/buildLine.js
+++ b/src/core/graphics/webgl/utils/buildLine.js
@@ -10,12 +10,13 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function (graphicsData, webGLData)
+export default function (graphicsData, webGLData, webGLDataNativeLines)
 {
     if (graphicsData.nativeLines)
     {
-        buildNativeLine(graphicsData, webGLData);
+        buildNativeLine(graphicsData, webGLDataNativeLines);
     }
     else
     {
diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js
index 36f4f2b..3731811 100644
--- a/src/core/graphics/webgl/utils/buildPoly.js
+++ b/src/core/graphics/webgl/utils/buildPoly.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildPoly(graphicsData, webGLData)
+export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines)
 {
     graphicsData.points = graphicsData.shape.points.slice();
 
@@ -73,6 +74,6 @@
 
     if (graphicsData.lineWidth > 0)
     {
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
     }
 }

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 
diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js
index abf5d02..14dcdbb 100644
--- a/src/core/graphics/webgl/utils/buildCircle.js
+++ b/src/core/graphics/webgl/utils/buildCircle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildCircle(graphicsData, webGLData)
+export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // need to convert points to a nice regular data
     const circleData = graphicsData.shape;
@@ -89,7 +90,7 @@
             );
         }
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }
diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js
index 4d6862e..07d9672 100644
--- a/src/core/graphics/webgl/utils/buildLine.js
+++ b/src/core/graphics/webgl/utils/buildLine.js
@@ -10,12 +10,13 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function (graphicsData, webGLData)
+export default function (graphicsData, webGLData, webGLDataNativeLines)
 {
     if (graphicsData.nativeLines)
     {
-        buildNativeLine(graphicsData, webGLData);
+        buildNativeLine(graphicsData, webGLDataNativeLines);
     }
     else
     {
diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js
index 36f4f2b..3731811 100644
--- a/src/core/graphics/webgl/utils/buildPoly.js
+++ b/src/core/graphics/webgl/utils/buildPoly.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildPoly(graphicsData, webGLData)
+export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines)
 {
     graphicsData.points = graphicsData.shape.points.slice();
 
@@ -73,6 +74,6 @@
 
     if (graphicsData.lineWidth > 0)
     {
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
     }
 }
diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js
index 84f44b6..ebf3b8c 100644
--- a/src/core/graphics/webgl/utils/buildRectangle.js
+++ b/src/core/graphics/webgl/utils/buildRectangle.js
@@ -10,8 +10,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildRectangle(graphicsData, webGLData)
+export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // --- //
     // need to convert points to a nice regular data
@@ -63,7 +64,7 @@
             x, y + height,
             x, y];
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }

diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
index 867dde2..3b13092 100644
--- a/src/core/graphics/webgl/GraphicsRenderer.js
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -103,7 +103,7 @@
 
             renderer.bindVao(webGLData.vao);
 
-            if (graphics.nativeLines)
+            if (webGLData.nativeLines)
             {
                 gl.drawArrays(gl.LINES, 0, webGLData.points.length / 6);
             }
@@ -153,6 +153,7 @@
         }
 
         let webGLData;
+        let webGLDataNativeLines;
 
         // loop through the graphics datas and construct each one..
         // if the object is a complex fill then the new stencil buffer technique will be used
@@ -164,21 +165,27 @@
             // TODO - this can be simplified
             webGLData = this.getWebGLData(webGL, 0);
 
+            if (data.nativeLines && data.lineWidth)
+            {
+                webGLDataNativeLines = this.getWebGLData(webGL, 0, true);
+                webGL.lastIndex++;
+            }
+
             if (data.type === SHAPES.POLY)
             {
-                buildPoly(data, webGLData);
+                buildPoly(data, webGLData, webGLDataNativeLines);
             }
             if (data.type === SHAPES.RECT)
             {
-                buildRectangle(data, webGLData);
+                buildRectangle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.CIRC || data.type === SHAPES.ELIP)
             {
-                buildCircle(data, webGLData);
+                buildCircle(data, webGLData, webGLDataNativeLines);
             }
             else if (data.type === SHAPES.RREC)
             {
-                buildRoundedRectangle(data, webGLData);
+                buildRoundedRectangle(data, webGLData, webGLDataNativeLines);
             }
 
             webGL.lastIndex++;
@@ -203,17 +210,18 @@
      * @private
      * @param {WebGLRenderingContext} gl - the current WebGL drawing context
      * @param {number} type - TODO @Alvin
+     * @param {number} nativeLines - indicate whether the webGLData use for nativeLines.
      * @return {*} TODO
      */
-    getWebGLData(gl, type)
+    getWebGLData(gl, type, nativeLines)
     {
         let webGLData = gl.data[gl.data.length - 1];
 
-        if (!webGLData || webGLData.points.length > 320000)
+        if (!webGLData || webGLData.nativeLines !== nativeLines || webGLData.points.length > 320000)
         {
             webGLData = this.graphicsDataPool.pop()
                 || new WebGLGraphicsData(this.renderer.gl, this.primitiveShader, this.renderer.state.attribsState);
-
+            webGLData.nativeLines = nativeLines;
             webGLData.reset(type);
             gl.data.push(webGLData);
         }
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
index a24030e..b2a0ad2 100644
--- a/src/core/graphics/webgl/WebGLGraphicsData.js
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -59,6 +59,12 @@
          */
         this.dirty = true;
 
+        /**
+         * Whether this graphics is nativeLines or not
+         * @member {boolean}
+         */
+        this.nativeLines = false;
+
         this.glPoints = null;
         this.glIndices = null;
 
diff --git a/src/core/graphics/webgl/utils/buildCircle.js b/src/core/graphics/webgl/utils/buildCircle.js
index abf5d02..14dcdbb 100644
--- a/src/core/graphics/webgl/utils/buildCircle.js
+++ b/src/core/graphics/webgl/utils/buildCircle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object to draw
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildCircle(graphicsData, webGLData)
+export default function buildCircle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // need to convert points to a nice regular data
     const circleData = graphicsData.shape;
@@ -89,7 +90,7 @@
             );
         }
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }
diff --git a/src/core/graphics/webgl/utils/buildLine.js b/src/core/graphics/webgl/utils/buildLine.js
index 4d6862e..07d9672 100644
--- a/src/core/graphics/webgl/utils/buildLine.js
+++ b/src/core/graphics/webgl/utils/buildLine.js
@@ -10,12 +10,13 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function (graphicsData, webGLData)
+export default function (graphicsData, webGLData, webGLDataNativeLines)
 {
     if (graphicsData.nativeLines)
     {
-        buildNativeLine(graphicsData, webGLData);
+        buildNativeLine(graphicsData, webGLDataNativeLines);
     }
     else
     {
diff --git a/src/core/graphics/webgl/utils/buildPoly.js b/src/core/graphics/webgl/utils/buildPoly.js
index 36f4f2b..3731811 100644
--- a/src/core/graphics/webgl/utils/buildPoly.js
+++ b/src/core/graphics/webgl/utils/buildPoly.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildPoly(graphicsData, webGLData)
+export default function buildPoly(graphicsData, webGLData, webGLDataNativeLines)
 {
     graphicsData.points = graphicsData.shape.points.slice();
 
@@ -73,6 +74,6 @@
 
     if (graphicsData.lineWidth > 0)
     {
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
     }
 }
diff --git a/src/core/graphics/webgl/utils/buildRectangle.js b/src/core/graphics/webgl/utils/buildRectangle.js
index 84f44b6..ebf3b8c 100644
--- a/src/core/graphics/webgl/utils/buildRectangle.js
+++ b/src/core/graphics/webgl/utils/buildRectangle.js
@@ -10,8 +10,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildRectangle(graphicsData, webGLData)
+export default function buildRectangle(graphicsData, webGLData, webGLDataNativeLines)
 {
     // --- //
     // need to convert points to a nice regular data
@@ -63,7 +64,7 @@
             x, y + height,
             x, y];
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }
diff --git a/src/core/graphics/webgl/utils/buildRoundedRectangle.js b/src/core/graphics/webgl/utils/buildRoundedRectangle.js
index a6c8461..c28734f 100644
--- a/src/core/graphics/webgl/utils/buildRoundedRectangle.js
+++ b/src/core/graphics/webgl/utils/buildRoundedRectangle.js
@@ -11,8 +11,9 @@
  * @private
  * @param {PIXI.WebGLGraphicsData} graphicsData - The graphics object containing all the necessary properties
  * @param {object} webGLData - an object containing all the webGL-specific information to create this shape
+ * @param {object} webGLDataNativeLines - an object containing all the webGL-specific information to create nativeLines
  */
-export default function buildRoundedRectangle(graphicsData, webGLData)
+export default function buildRoundedRectangle(graphicsData, webGLData, webGLDataNativeLines)
 {
     const rrectData = graphicsData.shape;
     const x = rrectData.x;
@@ -70,7 +71,7 @@
 
         graphicsData.points = recPoints;
 
-        buildLine(graphicsData, webGLData);
+        buildLine(graphicsData, webGLData, webGLDataNativeLines);
 
         graphicsData.points = tempPoints;
     }