diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
new file mode 100644
index 0000000..41be102
--- /dev/null
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -0,0 +1,48 @@
+/**
+ * @class
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    this.color = [0,0,0]; // color split!
+    this.points = [];
+    this.indices = [];
+    this.buffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+    this.mode = 1;
+    this.alpha = 1;
+    this.dirty = true;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points = [];
+    this.indices = [];
+};
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndicies = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
new file mode 100644
index 0000000..41be102
--- /dev/null
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -0,0 +1,48 @@
+/**
+ * @class
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    this.color = [0,0,0]; // color split!
+    this.points = [];
+    this.indices = [];
+    this.buffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+    this.mode = 1;
+    this.alpha = 1;
+    this.dirty = true;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points = [];
+    this.indices = [];
+};
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndicies = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};
diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js
deleted file mode 100644
index 8db9b45..0000000
--- a/src/core/primitives/Graphics.js
+++ /dev/null
@@ -1,1116 +0,0 @@
-var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
-    //Sprite = require('../display/Sprite'),
-    Texture = require('../textures/Texture'),
-    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
-    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
-   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
-    GraphicsData = require('./GraphicsData'),
-    math = require('../math'),
-    CONST = require('../const');
-
-/**
- * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
- * rectangles to the display, and color and fill them.
- *
- * @class
- * @extends DisplayObjectContainer
- * @namespace PIXI
- */
-function Graphics()
-{
-    DisplayObjectContainer.call(this);
-
-    this.renderable = true;
-
-    /**
-     * The alpha value used when filling the Graphics object.
-     *
-     * @member {number}
-     * @default 1
-     */
-    this.fillAlpha = 1;
-
-    /**
-     * The width (thickness) of any lines drawn.
-     *
-     * @member {number}
-     * @default 0
-     */
-    this.lineWidth = 0;
-
-    /**
-     * The color of any lines drawn.
-     *
-     * @member {string}
-     * @default 0
-     */
-    this.lineColor = 0;
-
-    /**
-     * Graphics data
-     *
-     * @member {GraphicsData[]}
-     * @private
-     */
-    this.graphicsData = [];
-
-    /**
-     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
-     *
-     * @member {number}
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;
-
-    /**
-     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
-     *
-     * @member {number}
-     * @default CONST.blendModes.NORMAL;
-     */
-    this.blendMode = CONST.blendModes.NORMAL;
-
-    /**
-     * Current path
-     *
-     * @member {GraphicsData}
-     * @private
-     */
-    this.currentPath = null;
-
-    /**
-     * Array containing some WebGL-related properties used by the WebGL renderer.
-     *
-     * @member {object<number, object>}
-     * @private
-     */
-    // TODO - _webgl should use a prototype object, not a random undocumented object...
-    this._webGL = {};
-
-    /**
-     * Whether this shape is being used as a mask.
-     *
-     * @member {boolean}
-     */
-    this.isMask = false;
-
-    /**
-     * The bounds' padding used for bounds calculation.
-     *
-     * @member {number}
-     */
-    this.boundsPadding = 0;
-
-    /**
-     * A cache of the local bounds to prevent recalculation.
-     *
-     * @member {Rectangle}
-     * @private
-     */
-    this._localBounds = new math.Rectangle(0,0,1,1);
-
-    /**
-     * Used to detect if the graphics object has changed. If this is set to true then the graphics
-     * object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.dirty = true;
-
-    /**
-     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
-     * graphics object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.glDirty = false;
-
-    /**
-     * Used to detect if the cached sprite object needs to be updated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.cachedSpriteDirty = false;
-}
-
-// constructor
-Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
-Graphics.prototype.constructor = Graphics;
-module.exports = Graphics;
-
-Object.defineProperties(Graphics.prototype, {
-    /**
-     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
-     * This is useful if your graphics element does not change often, as it will speed up the rendering
-     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
-     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
-     * you are constantly redrawing the graphics element.
-     *
-     * @member {boolean}
-     * @memberof Graphics#
-     * @default false
-     * @private
-     */
-    cacheAsBitmap: {
-        get: function ()
-        {
-            return this._cacheAsBitmap;
-        },
-        set: function (value)
-        {
-            this._cacheAsBitmap = value;
-
-            if (this._cacheAsBitmap)
-            {
-                this._generateCachedSprite();
-            }
-            else
-            {
-                this.destroyCachedSprite();
-                this.dirty = true;
-            }
-        }
-    }
-});
-
-/**
- * Creates a new Graphics object with the same values as this one.
- *
- * @return {Graphics}
- */
-GraphicsData.prototype.clone = function ()
-{
-    var clone = new Graphics();
-
-    clone.renderable    = this.renderable;
-    clone.fillAlpha     = this.fillAlpha;
-    clone.lineWidth     = this.lineWidth;
-    clone.lineColor     = this.lineColor;
-    clone.tint          = this.tint;
-    clone.blendMode     = this.blendMode;
-    clone.isMask        = this.isMask;
-    clone.boundsPadding = this.boundsPadding;
-    clone.dirty         = this.dirty;
-    clone.glDirty       = this.glDirty;
-    clone.cachedSpriteDirty = this.cachedSpriteDirty;
-
-    // copy graphics data
-    for (var i = 0; i < this.graphicsData.length; ++i)
-    {
-        clone.graphicsData.push(this.graphicsData.clone());
-    }
-
-    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
-
-    clone.updateLocalBounds();
-
-    return clone;
-};
-
-/**
- * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
- *
- * @param lineWidth {number} width of the line to draw, will update the objects stored style
- * @param color {number} color of the line to draw, will update the objects stored style
- * @param alpha {number} alpha of the line to draw, will update the objects stored style
- * @return {Graphics}
- */
-Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
-{
-    this.lineWidth = lineWidth || 0;
-    this.lineColor = color || 0;
-    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length)
-        {
-            // halfway through a line? start a new one!
-            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
-        }
-        else
-        {
-            // otherwise its empty so lets just set the line properties
-            this.currentPath.lineWidth = this.lineWidth;
-            this.currentPath.lineColor = this.lineColor;
-            this.currentPath.lineAlpha = this.lineAlpha;
-        }
-    }
-
-    return this;
-};
-
-/**
- * Moves the current drawing position to x, y.
- *
- * @param x {number} the X coordinate to move to
- * @param y {number} the Y coordinate to move to
- * @return {Graphics}
-  */
-Graphics.prototype.moveTo = function (x, y)
-{
-    this.drawShape(new math.Polygon([x,y]));
-
-    return this;
-};
-
-/**
- * Draws a line using the current line style from the current drawing position to (x, y);
- * The current drawing position is then set to (x, y).
- *
- * @param x {number} the X coordinate to draw to
- * @param y {number} the Y coordinate to draw to
- * @return {Graphics}
- */
-Graphics.prototype.lineTo = function (x, y)
-{
-    this.currentPath.shape.points.push(x, y);
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a quadratic bezier curve and then draws it.
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var xa,
-        ya,
-        n = 20,
-        points = this.currentPath.shape.points;
-
-    if (points.length === 0)
-    {
-        this.moveTo(0, 0);
-    }
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        xa = fromX + ( (cpX - fromX) * j );
-        ya = fromY + ( (cpY - fromY) * j );
-
-        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
-                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a bezier curve and then draws it.
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param cpX2 {number} Second Control point x
- * @param cpY2 {number} Second Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var n = 20,
-        dt,
-        dt2,
-        dt3,
-        t2,
-        t3,
-        points = this.currentPath.shape.points;
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        dt = (1 - j);
-        dt2 = dt * dt;
-        dt3 = dt2 * dt;
-
-        t2 = j * j;
-        t3 = t2 * j;
-
-        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
-                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arcTo() method creates an arc/curve between two tangents on the canvas.
- *
- * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
- * @param x1 {number} The x-coordinate of the beginning of the arc
- * @param y1 {number} The y-coordinate of the beginning of the arc
- * @param x2 {number} The x-coordinate of the end of the arc
- * @param y2 {number} The y-coordinate of the end of the arc
- * @param radius {number} The radius of the arc
- * @return {Graphics}
- */
-Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points.push(x1, y1);
-        }
-    }
-    else
-    {
-        this.moveTo(x1, y1);
-    }
-
-    var points = this.currentPath.shape.points,
-        fromX = points[points.length-2],
-        fromY = points[points.length-1],
-        a1 = fromY - y1,
-        b1 = fromX - x1,
-        a2 = y2   - y1,
-        b2 = x2   - x1,
-        mm = Math.abs(a1 * b2 - b1 * a2);
-
-    if (mm < 1.0e-8 || radius === 0)
-    {
-        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
-        {
-            points.push(x1, y1);
-        }
-    }
-    else
-    {
-        var dd = a1 * a1 + b1 * b1,
-            cc = a2 * a2 + b2 * b2,
-            tt = a1 * a2 + b1 * b2,
-            k1 = radius * Math.sqrt(dd) / mm,
-            k2 = radius * Math.sqrt(cc) / mm,
-            j1 = k1 * tt / dd,
-            j2 = k2 * tt / cc,
-            cx = k1 * b2 + k2 * b1,
-            cy = k1 * a2 + k2 * a1,
-            px = b1 * (k2 + j1),
-            py = a1 * (k2 + j1),
-            qx = b2 * (k1 + j2),
-            qy = a2 * (k1 + j2),
-            startAngle = Math.atan2(py - cy, px - cx),
-            endAngle   = Math.atan2(qy - cy, qx - cx);
-
-        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
- * @param cx {number} The x-coordinate of the center of the circle
- * @param cy {number} The y-coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
- * @param endAngle {number} The ending angle, in radians
- * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
- * @return {Graphics}
- */
-Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
-{
-    var startX = cx + Math.cos(startAngle) * radius;
-    var startY = cy + Math.sin(startAngle) * radius;
-    var points;
-
-    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
-    if (this.currentPath)
-    {
-        points = this.currentPath.shape.points;
-
-        if (points.length === 0)
-        {
-            points.push(startX, startY);
-        }
-        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
-        {
-            points.push(startX, startY);
-        }
-    }
-    else
-    {
-        this.moveTo(startX, startY);
-        points = this.currentPath.shape.points;
-    }
-
-    if (startAngle === endAngle)
-    {
-        return this;
-    }
-
-    if (!anticlockwise && endAngle <= startAngle)
-    {
-        endAngle += Math.PI * 2;
-    }
-    else if (anticlockwise && startAngle <= endAngle)
-    {
-        startAngle += Math.PI * 2;
-    }
-
-    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
-    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
-
-    if (sweep === 0)
-    {
-        return this;
-    }
-
-    var theta = sweep/(segs*2);
-    var theta2 = theta*2;
-
-    var cTheta = Math.cos(theta);
-    var sTheta = Math.sin(theta);
-
-    var segMinus = segs - 1;
-
-    var remainder = ( segMinus % 1 ) / segMinus;
-
-    for (var i = 0; i <= segMinus; ++i)
-    {
-        var real =  i + remainder * i;
-        var angle = ((theta) + startAngle + (theta2 * real));
-
-        var c = Math.cos(angle);
-        var s = -Math.sin(angle);
-
-        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
-                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Specifies a simple one-color fill that subsequent calls to other Graphics methods
- * (such as lineTo() or drawCircle()) use when drawing.
- *
- * @param color {number} the color of the fill
- * @param alpha {number} the alpha of the fill
- * @return {Graphics}
- */
-Graphics.prototype.beginFill = function (color, alpha)
-{
-    this.filling = true;
-    this.fillColor = color || 0;
-    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.currentPath.fill = this.filling;
-            this.currentPath.fillColor = this.fillColor;
-            this.currentPath.fillAlpha = this.fillAlpha;
-        }
-    }
-    return this;
-};
-
-/**
- * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @return {Graphics}
- */
-Graphics.prototype.endFill = function ()
-{
-    this.filling = false;
-    this.fillColor = null;
-    this.fillAlpha = 1;
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @return {Graphics}
- */
-Graphics.prototype.drawRect = function ( x, y, width, height )
-{
-    this.drawShape(new math.Rectangle(x,y, width, height));
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @param radius {number} Radius of the rectangle corners
- */
-Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
-{
-    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
-
-    return this;
-};
-
-/**
- * Draws a circle.
- *
- * @param x {number} The X coordinate of the center of the circle
- * @param y {number} The Y coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @return {Graphics}
- */
-Graphics.prototype.drawCircle = function (x, y, radius)
-{
-    this.drawShape(new math.Circle(x,y, radius));
-
-    return this;
-};
-
-/**
- * Draws an ellipse.
- *
- * @param x {number} The X coordinate of the center of the ellipse
- * @param y {number} The Y coordinate of the center of the ellipse
- * @param width {number} The half width of the ellipse
- * @param height {number} The half height of the ellipse
- * @return {Graphics}
- */
-Graphics.prototype.drawEllipse = function (x, y, width, height)
-{
-    this.drawShape(new math.Ellipse(x, y, width, height));
-
-    return this;
-};
-
-/**
- * Draws a polygon using the given path.
- *
- * @param path {Array} The path data used to construct the polygon.
- * @return {Graphics}
- */
-Graphics.prototype.drawPolygon = function (path)
-{
-    if (!(path instanceof Array))
-    {
-        path = Array.prototype.slice.call(arguments);
-    }
-
-    this.drawShape(new math.Polygon(path));
-
-    return this;
-};
-
-/**
- * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return {Graphics}
- */
-Graphics.prototype.clear = function ()
-{
-    this.lineWidth = 0;
-    this.filling = false;
-
-    this.dirty = true;
-    this.clearDirty = true;
-    this.graphicsData = [];
-
-    return this;
-};
-
-/**
- * Useful function that returns a texture of the graphics object that can then be used to create sprites
- * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
- *
- * @param resolution {number} The resolution of the texture being generated
- * @param scaleMode {number} Should be one of the scaleMode consts
- * @return {Texture} a texture of the graphics object
- */
-Graphics.prototype.generateTexture = function (resolution, scaleMode)
-{
-    resolution = resolution || 1;
-
-    var bounds = this.getBounds();
-
-    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
-
-    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
-    texture.baseTexture.resolution = resolution;
-
-    canvasBuffer.context.scale(resolution, resolution);
-
-    canvasBuffer.context.translate(-bounds.x,-bounds.y);
-
-    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
-
-    return texture;
-};
-
-/**
- * Renders the object using the WebGL renderer
- *
- * @param renderer {WebGLRenderer}
- */
-Graphics.prototype._renderWebGL = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (this.isMask === true)
-    {
-        return;
-    }
-
-    // this code may still be needed so leaving for now..
-    //
-    /*
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture on the gpu too!
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.worldAlpha = this.worldAlpha;
-
-        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
-
-        return;
-    }
-
-    */
-
-    if (this.glDirty)
-    {
-        this.dirty = true;
-        this.glDirty = false;
-    }
-
-    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
-    renderer.objectRenderers.graphics.render(this);
-
-};
-
-/**
- * Renders the object using the Canvas renderer
- *
- * @param renderer {CanvasRenderer}
- * @private
- */
-Graphics.prototype.renderCanvas = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha <= 0 || this.isMask === true)
-    {
-        return;
-    }
-
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.alpha = this.alpha;
-
-        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
-
-        return;
-    }
-    else
-    {
-        var context = renderer.context;
-        var transform = this.worldTransform;
-
-        if (this.blendMode !== renderer.currentBlendMode)
-        {
-            renderer.currentBlendMode = this.blendMode;
-            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.pushMask(this._mask, renderer);
-        }
-
-        var resolution = renderer.resolution;
-        context.setTransform(
-            transform.a * resolution,
-            transform.b * resolution,
-            transform.c * resolution,
-            transform.d * resolution,
-            transform.tx * resolution,
-            transform.ty * resolution
-        );
-
-        CanvasGraphics.renderGraphics(this, context);
-
-        for (var i = 0, j = this.children.length; i < j; ++i)
-        {
-            this.children[i].renderCanvas(renderer);
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.popMask(renderer);
-        }
-    }
-};
-
-/**
- * Retrieves the bounds of the graphic shape as a rectangle object
- *
- * @return {Rectangle} the rectangular bounding area
- */
-Graphics.prototype.getBounds = function (matrix)
-{
-    // return an empty object if the item is a mask!
-    if (this.isMask)
-    {
-        return math.Rectangle.EMPTY;
-    }
-
-    if (this.dirty)
-    {
-        this.updateLocalBounds();
-
-        this.glDirty = true;
-        this.cachedSpriteDirty = true;
-        this.dirty = false;
-    }
-
-    var bounds = this._localBounds;
-
-    var w0 = bounds.x;
-    var w1 = bounds.width + bounds.x;
-
-    var h0 = bounds.y;
-    var h1 = bounds.height + bounds.y;
-
-    var worldTransform = matrix || this.worldTransform;
-
-    var a = worldTransform.a;
-    var b = worldTransform.b;
-    var c = worldTransform.c;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
-
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
-
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
-
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
-
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
-
-    var maxX = x1;
-    var maxY = y1;
-
-    var minX = x1;
-    var minY = y1;
-
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
-
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
-
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
-
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
-
-    this._bounds.x = minX;
-    this._bounds.width = maxX - minX;
-
-    this._bounds.y = minY;
-    this._bounds.height = maxY - minY;
-
-    return this._bounds;
-};
-
-/**
- * Update the bounds of the object
- *
- */
-Graphics.prototype.updateLocalBounds = function ()
-{
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    if (this.graphicsData.length)
-    {
-        var shape, points, x, y, w, h;
-
-        for (var i = 0; i < this.graphicsData.length; i++)
-        {
-            var data = this.graphicsData[i];
-            var type = data.type;
-            var lineWidth = data.lineWidth;
-            shape = data.shape;
-
-            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
-            {
-                x = shape.x - lineWidth/2;
-                y = shape.y - lineWidth/2;
-                w = shape.width + lineWidth;
-                h = shape.height + lineWidth;
-
-                minX = x < minX ? x : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y < minY ? y : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.CIRC)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.radius + lineWidth/2;
-                h = shape.radius + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.ELIP)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.width + lineWidth/2;
-                h = shape.height + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else
-            {
-                // POLY
-                points = shape.points;
-
-                for (var j = 0; j < points.length; j += 2)
-                {
-                    x = points[j];
-                    y = points[j+1];
-
-                    minX = x-lineWidth < minX ? x-lineWidth : minX;
-                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
-
-                    minY = y-lineWidth < minY ? y-lineWidth : minY;
-                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
-                }
-            }
-        }
-    }
-    else
-    {
-        minX = 0;
-        maxX = 0;
-        minY = 0;
-        maxY = 0;
-    }
-
-    var padding = this.boundsPadding;
-
-    this._localBounds.x = minX - padding;
-    this._localBounds.width = (maxX - minX) + padding * 2;
-
-    this._localBounds.y = minY - padding;
-    this._localBounds.height = (maxY - minY) + padding * 2;
-};
-
-/**
- * Generates the cached sprite when the sprite has cacheAsBitmap = true
- *
- * @private
- */
-Graphics.prototype._generateCachedSprite = function ()
-{
-    var bounds = this.getLocalBounds();
-
-    if (!this._cachedSprite)
-    {
-        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
-        var texture = Texture.fromCanvas(canvasBuffer.canvas);
-
-        this._cachedSprite = new Sprite(texture);
-        this._cachedSprite.buffer = canvasBuffer;
-
-        this._cachedSprite.worldTransform = this.worldTransform;
-    }
-    else
-    {
-        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
-    }
-
-    // leverage the anchor to account for the offset of the element
-    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
-    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
-
-    // this._cachedSprite.buffer.context.save();
-    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
-
-    // make sure we set the alpha of the graphics to 1 for the render..
-    this.worldAlpha = 1;
-
-    // now render the graphic..
-    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
-
-    this._cachedSprite.alpha = this.alpha;
-};
-
-/**
- * Updates texture size based on canvas size
- *
- * @private
- */
-Graphics.prototype.updateCachedSpriteTexture = function ()
-{
-    var cachedSprite = this._cachedSprite;
-    var texture = cachedSprite.texture;
-    var canvas = cachedSprite.buffer.canvas;
-
-    texture.baseTexture.width = canvas.width;
-    texture.baseTexture.height = canvas.height;
-    texture.crop.width = texture.frame.width = canvas.width;
-    texture.crop.height = texture.frame.height = canvas.height;
-
-    cachedSprite._width = canvas.width;
-    cachedSprite._height = canvas.height;
-
-    // update the dirty base textures
-    texture.baseTexture.dirty();
-};
-
-/**
- * Destroys a previous cached sprite.
- *
- */
-Graphics.prototype.destroyCachedSprite = function ()
-{
-    this._cachedSprite.texture.destroy(true);
-
-    // let the gc collect the unused sprite
-    // TODO could be object pooled!
-    this._cachedSprite = null;
-};
-
-/**
- * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
- * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
- * @return {GraphicsData} The generated GraphicsData object.
- */
-Graphics.prototype.drawShape = function (shape)
-{
-    if (this.currentPath)
-    {
-        // check current path!
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.graphicsData.pop();
-        }
-    }
-
-    this.currentPath = null;
-
-    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
-
-    this.graphicsData.push(data);
-
-    if (data.type === CONST.SHAPES.POLY)
-    {
-        data.shape.closed = this.filling;
-        this.currentPath = data;
-    }
-
-    this.dirty = true;
-
-    return data;
-};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
new file mode 100644
index 0000000..41be102
--- /dev/null
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -0,0 +1,48 @@
+/**
+ * @class
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    this.color = [0,0,0]; // color split!
+    this.points = [];
+    this.indices = [];
+    this.buffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+    this.mode = 1;
+    this.alpha = 1;
+    this.dirty = true;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points = [];
+    this.indices = [];
+};
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndicies = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};
diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js
deleted file mode 100644
index 8db9b45..0000000
--- a/src/core/primitives/Graphics.js
+++ /dev/null
@@ -1,1116 +0,0 @@
-var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
-    //Sprite = require('../display/Sprite'),
-    Texture = require('../textures/Texture'),
-    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
-    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
-   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
-    GraphicsData = require('./GraphicsData'),
-    math = require('../math'),
-    CONST = require('../const');
-
-/**
- * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
- * rectangles to the display, and color and fill them.
- *
- * @class
- * @extends DisplayObjectContainer
- * @namespace PIXI
- */
-function Graphics()
-{
-    DisplayObjectContainer.call(this);
-
-    this.renderable = true;
-
-    /**
-     * The alpha value used when filling the Graphics object.
-     *
-     * @member {number}
-     * @default 1
-     */
-    this.fillAlpha = 1;
-
-    /**
-     * The width (thickness) of any lines drawn.
-     *
-     * @member {number}
-     * @default 0
-     */
-    this.lineWidth = 0;
-
-    /**
-     * The color of any lines drawn.
-     *
-     * @member {string}
-     * @default 0
-     */
-    this.lineColor = 0;
-
-    /**
-     * Graphics data
-     *
-     * @member {GraphicsData[]}
-     * @private
-     */
-    this.graphicsData = [];
-
-    /**
-     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
-     *
-     * @member {number}
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;
-
-    /**
-     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
-     *
-     * @member {number}
-     * @default CONST.blendModes.NORMAL;
-     */
-    this.blendMode = CONST.blendModes.NORMAL;
-
-    /**
-     * Current path
-     *
-     * @member {GraphicsData}
-     * @private
-     */
-    this.currentPath = null;
-
-    /**
-     * Array containing some WebGL-related properties used by the WebGL renderer.
-     *
-     * @member {object<number, object>}
-     * @private
-     */
-    // TODO - _webgl should use a prototype object, not a random undocumented object...
-    this._webGL = {};
-
-    /**
-     * Whether this shape is being used as a mask.
-     *
-     * @member {boolean}
-     */
-    this.isMask = false;
-
-    /**
-     * The bounds' padding used for bounds calculation.
-     *
-     * @member {number}
-     */
-    this.boundsPadding = 0;
-
-    /**
-     * A cache of the local bounds to prevent recalculation.
-     *
-     * @member {Rectangle}
-     * @private
-     */
-    this._localBounds = new math.Rectangle(0,0,1,1);
-
-    /**
-     * Used to detect if the graphics object has changed. If this is set to true then the graphics
-     * object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.dirty = true;
-
-    /**
-     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
-     * graphics object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.glDirty = false;
-
-    /**
-     * Used to detect if the cached sprite object needs to be updated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.cachedSpriteDirty = false;
-}
-
-// constructor
-Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
-Graphics.prototype.constructor = Graphics;
-module.exports = Graphics;
-
-Object.defineProperties(Graphics.prototype, {
-    /**
-     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
-     * This is useful if your graphics element does not change often, as it will speed up the rendering
-     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
-     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
-     * you are constantly redrawing the graphics element.
-     *
-     * @member {boolean}
-     * @memberof Graphics#
-     * @default false
-     * @private
-     */
-    cacheAsBitmap: {
-        get: function ()
-        {
-            return this._cacheAsBitmap;
-        },
-        set: function (value)
-        {
-            this._cacheAsBitmap = value;
-
-            if (this._cacheAsBitmap)
-            {
-                this._generateCachedSprite();
-            }
-            else
-            {
-                this.destroyCachedSprite();
-                this.dirty = true;
-            }
-        }
-    }
-});
-
-/**
- * Creates a new Graphics object with the same values as this one.
- *
- * @return {Graphics}
- */
-GraphicsData.prototype.clone = function ()
-{
-    var clone = new Graphics();
-
-    clone.renderable    = this.renderable;
-    clone.fillAlpha     = this.fillAlpha;
-    clone.lineWidth     = this.lineWidth;
-    clone.lineColor     = this.lineColor;
-    clone.tint          = this.tint;
-    clone.blendMode     = this.blendMode;
-    clone.isMask        = this.isMask;
-    clone.boundsPadding = this.boundsPadding;
-    clone.dirty         = this.dirty;
-    clone.glDirty       = this.glDirty;
-    clone.cachedSpriteDirty = this.cachedSpriteDirty;
-
-    // copy graphics data
-    for (var i = 0; i < this.graphicsData.length; ++i)
-    {
-        clone.graphicsData.push(this.graphicsData.clone());
-    }
-
-    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
-
-    clone.updateLocalBounds();
-
-    return clone;
-};
-
-/**
- * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
- *
- * @param lineWidth {number} width of the line to draw, will update the objects stored style
- * @param color {number} color of the line to draw, will update the objects stored style
- * @param alpha {number} alpha of the line to draw, will update the objects stored style
- * @return {Graphics}
- */
-Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
-{
-    this.lineWidth = lineWidth || 0;
-    this.lineColor = color || 0;
-    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length)
-        {
-            // halfway through a line? start a new one!
-            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
-        }
-        else
-        {
-            // otherwise its empty so lets just set the line properties
-            this.currentPath.lineWidth = this.lineWidth;
-            this.currentPath.lineColor = this.lineColor;
-            this.currentPath.lineAlpha = this.lineAlpha;
-        }
-    }
-
-    return this;
-};
-
-/**
- * Moves the current drawing position to x, y.
- *
- * @param x {number} the X coordinate to move to
- * @param y {number} the Y coordinate to move to
- * @return {Graphics}
-  */
-Graphics.prototype.moveTo = function (x, y)
-{
-    this.drawShape(new math.Polygon([x,y]));
-
-    return this;
-};
-
-/**
- * Draws a line using the current line style from the current drawing position to (x, y);
- * The current drawing position is then set to (x, y).
- *
- * @param x {number} the X coordinate to draw to
- * @param y {number} the Y coordinate to draw to
- * @return {Graphics}
- */
-Graphics.prototype.lineTo = function (x, y)
-{
-    this.currentPath.shape.points.push(x, y);
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a quadratic bezier curve and then draws it.
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var xa,
-        ya,
-        n = 20,
-        points = this.currentPath.shape.points;
-
-    if (points.length === 0)
-    {
-        this.moveTo(0, 0);
-    }
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        xa = fromX + ( (cpX - fromX) * j );
-        ya = fromY + ( (cpY - fromY) * j );
-
-        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
-                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a bezier curve and then draws it.
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param cpX2 {number} Second Control point x
- * @param cpY2 {number} Second Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var n = 20,
-        dt,
-        dt2,
-        dt3,
-        t2,
-        t3,
-        points = this.currentPath.shape.points;
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        dt = (1 - j);
-        dt2 = dt * dt;
-        dt3 = dt2 * dt;
-
-        t2 = j * j;
-        t3 = t2 * j;
-
-        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
-                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arcTo() method creates an arc/curve between two tangents on the canvas.
- *
- * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
- * @param x1 {number} The x-coordinate of the beginning of the arc
- * @param y1 {number} The y-coordinate of the beginning of the arc
- * @param x2 {number} The x-coordinate of the end of the arc
- * @param y2 {number} The y-coordinate of the end of the arc
- * @param radius {number} The radius of the arc
- * @return {Graphics}
- */
-Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points.push(x1, y1);
-        }
-    }
-    else
-    {
-        this.moveTo(x1, y1);
-    }
-
-    var points = this.currentPath.shape.points,
-        fromX = points[points.length-2],
-        fromY = points[points.length-1],
-        a1 = fromY - y1,
-        b1 = fromX - x1,
-        a2 = y2   - y1,
-        b2 = x2   - x1,
-        mm = Math.abs(a1 * b2 - b1 * a2);
-
-    if (mm < 1.0e-8 || radius === 0)
-    {
-        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
-        {
-            points.push(x1, y1);
-        }
-    }
-    else
-    {
-        var dd = a1 * a1 + b1 * b1,
-            cc = a2 * a2 + b2 * b2,
-            tt = a1 * a2 + b1 * b2,
-            k1 = radius * Math.sqrt(dd) / mm,
-            k2 = radius * Math.sqrt(cc) / mm,
-            j1 = k1 * tt / dd,
-            j2 = k2 * tt / cc,
-            cx = k1 * b2 + k2 * b1,
-            cy = k1 * a2 + k2 * a1,
-            px = b1 * (k2 + j1),
-            py = a1 * (k2 + j1),
-            qx = b2 * (k1 + j2),
-            qy = a2 * (k1 + j2),
-            startAngle = Math.atan2(py - cy, px - cx),
-            endAngle   = Math.atan2(qy - cy, qx - cx);
-
-        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
- * @param cx {number} The x-coordinate of the center of the circle
- * @param cy {number} The y-coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
- * @param endAngle {number} The ending angle, in radians
- * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
- * @return {Graphics}
- */
-Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
-{
-    var startX = cx + Math.cos(startAngle) * radius;
-    var startY = cy + Math.sin(startAngle) * radius;
-    var points;
-
-    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
-    if (this.currentPath)
-    {
-        points = this.currentPath.shape.points;
-
-        if (points.length === 0)
-        {
-            points.push(startX, startY);
-        }
-        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
-        {
-            points.push(startX, startY);
-        }
-    }
-    else
-    {
-        this.moveTo(startX, startY);
-        points = this.currentPath.shape.points;
-    }
-
-    if (startAngle === endAngle)
-    {
-        return this;
-    }
-
-    if (!anticlockwise && endAngle <= startAngle)
-    {
-        endAngle += Math.PI * 2;
-    }
-    else if (anticlockwise && startAngle <= endAngle)
-    {
-        startAngle += Math.PI * 2;
-    }
-
-    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
-    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
-
-    if (sweep === 0)
-    {
-        return this;
-    }
-
-    var theta = sweep/(segs*2);
-    var theta2 = theta*2;
-
-    var cTheta = Math.cos(theta);
-    var sTheta = Math.sin(theta);
-
-    var segMinus = segs - 1;
-
-    var remainder = ( segMinus % 1 ) / segMinus;
-
-    for (var i = 0; i <= segMinus; ++i)
-    {
-        var real =  i + remainder * i;
-        var angle = ((theta) + startAngle + (theta2 * real));
-
-        var c = Math.cos(angle);
-        var s = -Math.sin(angle);
-
-        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
-                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Specifies a simple one-color fill that subsequent calls to other Graphics methods
- * (such as lineTo() or drawCircle()) use when drawing.
- *
- * @param color {number} the color of the fill
- * @param alpha {number} the alpha of the fill
- * @return {Graphics}
- */
-Graphics.prototype.beginFill = function (color, alpha)
-{
-    this.filling = true;
-    this.fillColor = color || 0;
-    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.currentPath.fill = this.filling;
-            this.currentPath.fillColor = this.fillColor;
-            this.currentPath.fillAlpha = this.fillAlpha;
-        }
-    }
-    return this;
-};
-
-/**
- * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @return {Graphics}
- */
-Graphics.prototype.endFill = function ()
-{
-    this.filling = false;
-    this.fillColor = null;
-    this.fillAlpha = 1;
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @return {Graphics}
- */
-Graphics.prototype.drawRect = function ( x, y, width, height )
-{
-    this.drawShape(new math.Rectangle(x,y, width, height));
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @param radius {number} Radius of the rectangle corners
- */
-Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
-{
-    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
-
-    return this;
-};
-
-/**
- * Draws a circle.
- *
- * @param x {number} The X coordinate of the center of the circle
- * @param y {number} The Y coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @return {Graphics}
- */
-Graphics.prototype.drawCircle = function (x, y, radius)
-{
-    this.drawShape(new math.Circle(x,y, radius));
-
-    return this;
-};
-
-/**
- * Draws an ellipse.
- *
- * @param x {number} The X coordinate of the center of the ellipse
- * @param y {number} The Y coordinate of the center of the ellipse
- * @param width {number} The half width of the ellipse
- * @param height {number} The half height of the ellipse
- * @return {Graphics}
- */
-Graphics.prototype.drawEllipse = function (x, y, width, height)
-{
-    this.drawShape(new math.Ellipse(x, y, width, height));
-
-    return this;
-};
-
-/**
- * Draws a polygon using the given path.
- *
- * @param path {Array} The path data used to construct the polygon.
- * @return {Graphics}
- */
-Graphics.prototype.drawPolygon = function (path)
-{
-    if (!(path instanceof Array))
-    {
-        path = Array.prototype.slice.call(arguments);
-    }
-
-    this.drawShape(new math.Polygon(path));
-
-    return this;
-};
-
-/**
- * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return {Graphics}
- */
-Graphics.prototype.clear = function ()
-{
-    this.lineWidth = 0;
-    this.filling = false;
-
-    this.dirty = true;
-    this.clearDirty = true;
-    this.graphicsData = [];
-
-    return this;
-};
-
-/**
- * Useful function that returns a texture of the graphics object that can then be used to create sprites
- * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
- *
- * @param resolution {number} The resolution of the texture being generated
- * @param scaleMode {number} Should be one of the scaleMode consts
- * @return {Texture} a texture of the graphics object
- */
-Graphics.prototype.generateTexture = function (resolution, scaleMode)
-{
-    resolution = resolution || 1;
-
-    var bounds = this.getBounds();
-
-    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
-
-    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
-    texture.baseTexture.resolution = resolution;
-
-    canvasBuffer.context.scale(resolution, resolution);
-
-    canvasBuffer.context.translate(-bounds.x,-bounds.y);
-
-    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
-
-    return texture;
-};
-
-/**
- * Renders the object using the WebGL renderer
- *
- * @param renderer {WebGLRenderer}
- */
-Graphics.prototype._renderWebGL = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (this.isMask === true)
-    {
-        return;
-    }
-
-    // this code may still be needed so leaving for now..
-    //
-    /*
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture on the gpu too!
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.worldAlpha = this.worldAlpha;
-
-        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
-
-        return;
-    }
-
-    */
-
-    if (this.glDirty)
-    {
-        this.dirty = true;
-        this.glDirty = false;
-    }
-
-    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
-    renderer.objectRenderers.graphics.render(this);
-
-};
-
-/**
- * Renders the object using the Canvas renderer
- *
- * @param renderer {CanvasRenderer}
- * @private
- */
-Graphics.prototype.renderCanvas = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha <= 0 || this.isMask === true)
-    {
-        return;
-    }
-
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.alpha = this.alpha;
-
-        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
-
-        return;
-    }
-    else
-    {
-        var context = renderer.context;
-        var transform = this.worldTransform;
-
-        if (this.blendMode !== renderer.currentBlendMode)
-        {
-            renderer.currentBlendMode = this.blendMode;
-            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.pushMask(this._mask, renderer);
-        }
-
-        var resolution = renderer.resolution;
-        context.setTransform(
-            transform.a * resolution,
-            transform.b * resolution,
-            transform.c * resolution,
-            transform.d * resolution,
-            transform.tx * resolution,
-            transform.ty * resolution
-        );
-
-        CanvasGraphics.renderGraphics(this, context);
-
-        for (var i = 0, j = this.children.length; i < j; ++i)
-        {
-            this.children[i].renderCanvas(renderer);
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.popMask(renderer);
-        }
-    }
-};
-
-/**
- * Retrieves the bounds of the graphic shape as a rectangle object
- *
- * @return {Rectangle} the rectangular bounding area
- */
-Graphics.prototype.getBounds = function (matrix)
-{
-    // return an empty object if the item is a mask!
-    if (this.isMask)
-    {
-        return math.Rectangle.EMPTY;
-    }
-
-    if (this.dirty)
-    {
-        this.updateLocalBounds();
-
-        this.glDirty = true;
-        this.cachedSpriteDirty = true;
-        this.dirty = false;
-    }
-
-    var bounds = this._localBounds;
-
-    var w0 = bounds.x;
-    var w1 = bounds.width + bounds.x;
-
-    var h0 = bounds.y;
-    var h1 = bounds.height + bounds.y;
-
-    var worldTransform = matrix || this.worldTransform;
-
-    var a = worldTransform.a;
-    var b = worldTransform.b;
-    var c = worldTransform.c;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
-
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
-
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
-
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
-
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
-
-    var maxX = x1;
-    var maxY = y1;
-
-    var minX = x1;
-    var minY = y1;
-
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
-
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
-
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
-
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
-
-    this._bounds.x = minX;
-    this._bounds.width = maxX - minX;
-
-    this._bounds.y = minY;
-    this._bounds.height = maxY - minY;
-
-    return this._bounds;
-};
-
-/**
- * Update the bounds of the object
- *
- */
-Graphics.prototype.updateLocalBounds = function ()
-{
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    if (this.graphicsData.length)
-    {
-        var shape, points, x, y, w, h;
-
-        for (var i = 0; i < this.graphicsData.length; i++)
-        {
-            var data = this.graphicsData[i];
-            var type = data.type;
-            var lineWidth = data.lineWidth;
-            shape = data.shape;
-
-            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
-            {
-                x = shape.x - lineWidth/2;
-                y = shape.y - lineWidth/2;
-                w = shape.width + lineWidth;
-                h = shape.height + lineWidth;
-
-                minX = x < minX ? x : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y < minY ? y : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.CIRC)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.radius + lineWidth/2;
-                h = shape.radius + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.ELIP)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.width + lineWidth/2;
-                h = shape.height + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else
-            {
-                // POLY
-                points = shape.points;
-
-                for (var j = 0; j < points.length; j += 2)
-                {
-                    x = points[j];
-                    y = points[j+1];
-
-                    minX = x-lineWidth < minX ? x-lineWidth : minX;
-                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
-
-                    minY = y-lineWidth < minY ? y-lineWidth : minY;
-                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
-                }
-            }
-        }
-    }
-    else
-    {
-        minX = 0;
-        maxX = 0;
-        minY = 0;
-        maxY = 0;
-    }
-
-    var padding = this.boundsPadding;
-
-    this._localBounds.x = minX - padding;
-    this._localBounds.width = (maxX - minX) + padding * 2;
-
-    this._localBounds.y = minY - padding;
-    this._localBounds.height = (maxY - minY) + padding * 2;
-};
-
-/**
- * Generates the cached sprite when the sprite has cacheAsBitmap = true
- *
- * @private
- */
-Graphics.prototype._generateCachedSprite = function ()
-{
-    var bounds = this.getLocalBounds();
-
-    if (!this._cachedSprite)
-    {
-        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
-        var texture = Texture.fromCanvas(canvasBuffer.canvas);
-
-        this._cachedSprite = new Sprite(texture);
-        this._cachedSprite.buffer = canvasBuffer;
-
-        this._cachedSprite.worldTransform = this.worldTransform;
-    }
-    else
-    {
-        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
-    }
-
-    // leverage the anchor to account for the offset of the element
-    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
-    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
-
-    // this._cachedSprite.buffer.context.save();
-    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
-
-    // make sure we set the alpha of the graphics to 1 for the render..
-    this.worldAlpha = 1;
-
-    // now render the graphic..
-    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
-
-    this._cachedSprite.alpha = this.alpha;
-};
-
-/**
- * Updates texture size based on canvas size
- *
- * @private
- */
-Graphics.prototype.updateCachedSpriteTexture = function ()
-{
-    var cachedSprite = this._cachedSprite;
-    var texture = cachedSprite.texture;
-    var canvas = cachedSprite.buffer.canvas;
-
-    texture.baseTexture.width = canvas.width;
-    texture.baseTexture.height = canvas.height;
-    texture.crop.width = texture.frame.width = canvas.width;
-    texture.crop.height = texture.frame.height = canvas.height;
-
-    cachedSprite._width = canvas.width;
-    cachedSprite._height = canvas.height;
-
-    // update the dirty base textures
-    texture.baseTexture.dirty();
-};
-
-/**
- * Destroys a previous cached sprite.
- *
- */
-Graphics.prototype.destroyCachedSprite = function ()
-{
-    this._cachedSprite.texture.destroy(true);
-
-    // let the gc collect the unused sprite
-    // TODO could be object pooled!
-    this._cachedSprite = null;
-};
-
-/**
- * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
- * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
- * @return {GraphicsData} The generated GraphicsData object.
- */
-Graphics.prototype.drawShape = function (shape)
-{
-    if (this.currentPath)
-    {
-        // check current path!
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.graphicsData.pop();
-        }
-    }
-
-    this.currentPath = null;
-
-    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
-
-    this.graphicsData.push(data);
-
-    if (data.type === CONST.SHAPES.POLY)
-    {
-        data.shape.closed = this.filling;
-        this.currentPath = data;
-    }
-
-    this.dirty = true;
-
-    return data;
-};
diff --git a/src/core/primitives/GraphicsData.js b/src/core/primitives/GraphicsData.js
deleted file mode 100644
index 788f6f2..0000000
--- a/src/core/primitives/GraphicsData.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * A GraphicsData object.
- *
- * @class
- * @namespace PIXI
- */
-function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
-{
-    this.lineWidth = lineWidth;
-    this.lineColor = lineColor;
-    this.lineAlpha = lineAlpha;
-    this._lineTint = lineColor;
-
-    this.fillColor = fillColor;
-    this.fillAlpha = fillAlpha;
-    this._fillTint = fillColor;
-    this.fill = fill;
-
-    this.shape = shape;
-    this.type = shape.type;
-}
-
-GraphicsData.prototype.constructor = GraphicsData;
-module.exports = GraphicsData;
-
-/**
- * Creates a new GraphicsData object with the same values as this one.
- *
- * @return {GraphicsData}
- */
-GraphicsData.prototype.clone = function ()
-{
-    return new GraphicsData(
-        this.lineWidth,
-        this.lineColor,
-        this.lineAlpha,
-        this.fillColor,
-        this.fillAlpha,
-        this.fill,
-        this.shape
-    );
-};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
new file mode 100644
index 0000000..41be102
--- /dev/null
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -0,0 +1,48 @@
+/**
+ * @class
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    this.color = [0,0,0]; // color split!
+    this.points = [];
+    this.indices = [];
+    this.buffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+    this.mode = 1;
+    this.alpha = 1;
+    this.dirty = true;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points = [];
+    this.indices = [];
+};
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndicies = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};
diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js
deleted file mode 100644
index 8db9b45..0000000
--- a/src/core/primitives/Graphics.js
+++ /dev/null
@@ -1,1116 +0,0 @@
-var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
-    //Sprite = require('../display/Sprite'),
-    Texture = require('../textures/Texture'),
-    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
-    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
-   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
-    GraphicsData = require('./GraphicsData'),
-    math = require('../math'),
-    CONST = require('../const');
-
-/**
- * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
- * rectangles to the display, and color and fill them.
- *
- * @class
- * @extends DisplayObjectContainer
- * @namespace PIXI
- */
-function Graphics()
-{
-    DisplayObjectContainer.call(this);
-
-    this.renderable = true;
-
-    /**
-     * The alpha value used when filling the Graphics object.
-     *
-     * @member {number}
-     * @default 1
-     */
-    this.fillAlpha = 1;
-
-    /**
-     * The width (thickness) of any lines drawn.
-     *
-     * @member {number}
-     * @default 0
-     */
-    this.lineWidth = 0;
-
-    /**
-     * The color of any lines drawn.
-     *
-     * @member {string}
-     * @default 0
-     */
-    this.lineColor = 0;
-
-    /**
-     * Graphics data
-     *
-     * @member {GraphicsData[]}
-     * @private
-     */
-    this.graphicsData = [];
-
-    /**
-     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
-     *
-     * @member {number}
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;
-
-    /**
-     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
-     *
-     * @member {number}
-     * @default CONST.blendModes.NORMAL;
-     */
-    this.blendMode = CONST.blendModes.NORMAL;
-
-    /**
-     * Current path
-     *
-     * @member {GraphicsData}
-     * @private
-     */
-    this.currentPath = null;
-
-    /**
-     * Array containing some WebGL-related properties used by the WebGL renderer.
-     *
-     * @member {object<number, object>}
-     * @private
-     */
-    // TODO - _webgl should use a prototype object, not a random undocumented object...
-    this._webGL = {};
-
-    /**
-     * Whether this shape is being used as a mask.
-     *
-     * @member {boolean}
-     */
-    this.isMask = false;
-
-    /**
-     * The bounds' padding used for bounds calculation.
-     *
-     * @member {number}
-     */
-    this.boundsPadding = 0;
-
-    /**
-     * A cache of the local bounds to prevent recalculation.
-     *
-     * @member {Rectangle}
-     * @private
-     */
-    this._localBounds = new math.Rectangle(0,0,1,1);
-
-    /**
-     * Used to detect if the graphics object has changed. If this is set to true then the graphics
-     * object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.dirty = true;
-
-    /**
-     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
-     * graphics object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.glDirty = false;
-
-    /**
-     * Used to detect if the cached sprite object needs to be updated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.cachedSpriteDirty = false;
-}
-
-// constructor
-Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
-Graphics.prototype.constructor = Graphics;
-module.exports = Graphics;
-
-Object.defineProperties(Graphics.prototype, {
-    /**
-     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
-     * This is useful if your graphics element does not change often, as it will speed up the rendering
-     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
-     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
-     * you are constantly redrawing the graphics element.
-     *
-     * @member {boolean}
-     * @memberof Graphics#
-     * @default false
-     * @private
-     */
-    cacheAsBitmap: {
-        get: function ()
-        {
-            return this._cacheAsBitmap;
-        },
-        set: function (value)
-        {
-            this._cacheAsBitmap = value;
-
-            if (this._cacheAsBitmap)
-            {
-                this._generateCachedSprite();
-            }
-            else
-            {
-                this.destroyCachedSprite();
-                this.dirty = true;
-            }
-        }
-    }
-});
-
-/**
- * Creates a new Graphics object with the same values as this one.
- *
- * @return {Graphics}
- */
-GraphicsData.prototype.clone = function ()
-{
-    var clone = new Graphics();
-
-    clone.renderable    = this.renderable;
-    clone.fillAlpha     = this.fillAlpha;
-    clone.lineWidth     = this.lineWidth;
-    clone.lineColor     = this.lineColor;
-    clone.tint          = this.tint;
-    clone.blendMode     = this.blendMode;
-    clone.isMask        = this.isMask;
-    clone.boundsPadding = this.boundsPadding;
-    clone.dirty         = this.dirty;
-    clone.glDirty       = this.glDirty;
-    clone.cachedSpriteDirty = this.cachedSpriteDirty;
-
-    // copy graphics data
-    for (var i = 0; i < this.graphicsData.length; ++i)
-    {
-        clone.graphicsData.push(this.graphicsData.clone());
-    }
-
-    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
-
-    clone.updateLocalBounds();
-
-    return clone;
-};
-
-/**
- * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
- *
- * @param lineWidth {number} width of the line to draw, will update the objects stored style
- * @param color {number} color of the line to draw, will update the objects stored style
- * @param alpha {number} alpha of the line to draw, will update the objects stored style
- * @return {Graphics}
- */
-Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
-{
-    this.lineWidth = lineWidth || 0;
-    this.lineColor = color || 0;
-    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length)
-        {
-            // halfway through a line? start a new one!
-            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
-        }
-        else
-        {
-            // otherwise its empty so lets just set the line properties
-            this.currentPath.lineWidth = this.lineWidth;
-            this.currentPath.lineColor = this.lineColor;
-            this.currentPath.lineAlpha = this.lineAlpha;
-        }
-    }
-
-    return this;
-};
-
-/**
- * Moves the current drawing position to x, y.
- *
- * @param x {number} the X coordinate to move to
- * @param y {number} the Y coordinate to move to
- * @return {Graphics}
-  */
-Graphics.prototype.moveTo = function (x, y)
-{
-    this.drawShape(new math.Polygon([x,y]));
-
-    return this;
-};
-
-/**
- * Draws a line using the current line style from the current drawing position to (x, y);
- * The current drawing position is then set to (x, y).
- *
- * @param x {number} the X coordinate to draw to
- * @param y {number} the Y coordinate to draw to
- * @return {Graphics}
- */
-Graphics.prototype.lineTo = function (x, y)
-{
-    this.currentPath.shape.points.push(x, y);
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a quadratic bezier curve and then draws it.
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var xa,
-        ya,
-        n = 20,
-        points = this.currentPath.shape.points;
-
-    if (points.length === 0)
-    {
-        this.moveTo(0, 0);
-    }
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        xa = fromX + ( (cpX - fromX) * j );
-        ya = fromY + ( (cpY - fromY) * j );
-
-        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
-                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a bezier curve and then draws it.
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param cpX2 {number} Second Control point x
- * @param cpY2 {number} Second Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var n = 20,
-        dt,
-        dt2,
-        dt3,
-        t2,
-        t3,
-        points = this.currentPath.shape.points;
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        dt = (1 - j);
-        dt2 = dt * dt;
-        dt3 = dt2 * dt;
-
-        t2 = j * j;
-        t3 = t2 * j;
-
-        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
-                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arcTo() method creates an arc/curve between two tangents on the canvas.
- *
- * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
- * @param x1 {number} The x-coordinate of the beginning of the arc
- * @param y1 {number} The y-coordinate of the beginning of the arc
- * @param x2 {number} The x-coordinate of the end of the arc
- * @param y2 {number} The y-coordinate of the end of the arc
- * @param radius {number} The radius of the arc
- * @return {Graphics}
- */
-Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points.push(x1, y1);
-        }
-    }
-    else
-    {
-        this.moveTo(x1, y1);
-    }
-
-    var points = this.currentPath.shape.points,
-        fromX = points[points.length-2],
-        fromY = points[points.length-1],
-        a1 = fromY - y1,
-        b1 = fromX - x1,
-        a2 = y2   - y1,
-        b2 = x2   - x1,
-        mm = Math.abs(a1 * b2 - b1 * a2);
-
-    if (mm < 1.0e-8 || radius === 0)
-    {
-        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
-        {
-            points.push(x1, y1);
-        }
-    }
-    else
-    {
-        var dd = a1 * a1 + b1 * b1,
-            cc = a2 * a2 + b2 * b2,
-            tt = a1 * a2 + b1 * b2,
-            k1 = radius * Math.sqrt(dd) / mm,
-            k2 = radius * Math.sqrt(cc) / mm,
-            j1 = k1 * tt / dd,
-            j2 = k2 * tt / cc,
-            cx = k1 * b2 + k2 * b1,
-            cy = k1 * a2 + k2 * a1,
-            px = b1 * (k2 + j1),
-            py = a1 * (k2 + j1),
-            qx = b2 * (k1 + j2),
-            qy = a2 * (k1 + j2),
-            startAngle = Math.atan2(py - cy, px - cx),
-            endAngle   = Math.atan2(qy - cy, qx - cx);
-
-        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
- * @param cx {number} The x-coordinate of the center of the circle
- * @param cy {number} The y-coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
- * @param endAngle {number} The ending angle, in radians
- * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
- * @return {Graphics}
- */
-Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
-{
-    var startX = cx + Math.cos(startAngle) * radius;
-    var startY = cy + Math.sin(startAngle) * radius;
-    var points;
-
-    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
-    if (this.currentPath)
-    {
-        points = this.currentPath.shape.points;
-
-        if (points.length === 0)
-        {
-            points.push(startX, startY);
-        }
-        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
-        {
-            points.push(startX, startY);
-        }
-    }
-    else
-    {
-        this.moveTo(startX, startY);
-        points = this.currentPath.shape.points;
-    }
-
-    if (startAngle === endAngle)
-    {
-        return this;
-    }
-
-    if (!anticlockwise && endAngle <= startAngle)
-    {
-        endAngle += Math.PI * 2;
-    }
-    else if (anticlockwise && startAngle <= endAngle)
-    {
-        startAngle += Math.PI * 2;
-    }
-
-    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
-    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
-
-    if (sweep === 0)
-    {
-        return this;
-    }
-
-    var theta = sweep/(segs*2);
-    var theta2 = theta*2;
-
-    var cTheta = Math.cos(theta);
-    var sTheta = Math.sin(theta);
-
-    var segMinus = segs - 1;
-
-    var remainder = ( segMinus % 1 ) / segMinus;
-
-    for (var i = 0; i <= segMinus; ++i)
-    {
-        var real =  i + remainder * i;
-        var angle = ((theta) + startAngle + (theta2 * real));
-
-        var c = Math.cos(angle);
-        var s = -Math.sin(angle);
-
-        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
-                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Specifies a simple one-color fill that subsequent calls to other Graphics methods
- * (such as lineTo() or drawCircle()) use when drawing.
- *
- * @param color {number} the color of the fill
- * @param alpha {number} the alpha of the fill
- * @return {Graphics}
- */
-Graphics.prototype.beginFill = function (color, alpha)
-{
-    this.filling = true;
-    this.fillColor = color || 0;
-    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.currentPath.fill = this.filling;
-            this.currentPath.fillColor = this.fillColor;
-            this.currentPath.fillAlpha = this.fillAlpha;
-        }
-    }
-    return this;
-};
-
-/**
- * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @return {Graphics}
- */
-Graphics.prototype.endFill = function ()
-{
-    this.filling = false;
-    this.fillColor = null;
-    this.fillAlpha = 1;
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @return {Graphics}
- */
-Graphics.prototype.drawRect = function ( x, y, width, height )
-{
-    this.drawShape(new math.Rectangle(x,y, width, height));
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @param radius {number} Radius of the rectangle corners
- */
-Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
-{
-    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
-
-    return this;
-};
-
-/**
- * Draws a circle.
- *
- * @param x {number} The X coordinate of the center of the circle
- * @param y {number} The Y coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @return {Graphics}
- */
-Graphics.prototype.drawCircle = function (x, y, radius)
-{
-    this.drawShape(new math.Circle(x,y, radius));
-
-    return this;
-};
-
-/**
- * Draws an ellipse.
- *
- * @param x {number} The X coordinate of the center of the ellipse
- * @param y {number} The Y coordinate of the center of the ellipse
- * @param width {number} The half width of the ellipse
- * @param height {number} The half height of the ellipse
- * @return {Graphics}
- */
-Graphics.prototype.drawEllipse = function (x, y, width, height)
-{
-    this.drawShape(new math.Ellipse(x, y, width, height));
-
-    return this;
-};
-
-/**
- * Draws a polygon using the given path.
- *
- * @param path {Array} The path data used to construct the polygon.
- * @return {Graphics}
- */
-Graphics.prototype.drawPolygon = function (path)
-{
-    if (!(path instanceof Array))
-    {
-        path = Array.prototype.slice.call(arguments);
-    }
-
-    this.drawShape(new math.Polygon(path));
-
-    return this;
-};
-
-/**
- * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return {Graphics}
- */
-Graphics.prototype.clear = function ()
-{
-    this.lineWidth = 0;
-    this.filling = false;
-
-    this.dirty = true;
-    this.clearDirty = true;
-    this.graphicsData = [];
-
-    return this;
-};
-
-/**
- * Useful function that returns a texture of the graphics object that can then be used to create sprites
- * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
- *
- * @param resolution {number} The resolution of the texture being generated
- * @param scaleMode {number} Should be one of the scaleMode consts
- * @return {Texture} a texture of the graphics object
- */
-Graphics.prototype.generateTexture = function (resolution, scaleMode)
-{
-    resolution = resolution || 1;
-
-    var bounds = this.getBounds();
-
-    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
-
-    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
-    texture.baseTexture.resolution = resolution;
-
-    canvasBuffer.context.scale(resolution, resolution);
-
-    canvasBuffer.context.translate(-bounds.x,-bounds.y);
-
-    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
-
-    return texture;
-};
-
-/**
- * Renders the object using the WebGL renderer
- *
- * @param renderer {WebGLRenderer}
- */
-Graphics.prototype._renderWebGL = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (this.isMask === true)
-    {
-        return;
-    }
-
-    // this code may still be needed so leaving for now..
-    //
-    /*
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture on the gpu too!
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.worldAlpha = this.worldAlpha;
-
-        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
-
-        return;
-    }
-
-    */
-
-    if (this.glDirty)
-    {
-        this.dirty = true;
-        this.glDirty = false;
-    }
-
-    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
-    renderer.objectRenderers.graphics.render(this);
-
-};
-
-/**
- * Renders the object using the Canvas renderer
- *
- * @param renderer {CanvasRenderer}
- * @private
- */
-Graphics.prototype.renderCanvas = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha <= 0 || this.isMask === true)
-    {
-        return;
-    }
-
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.alpha = this.alpha;
-
-        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
-
-        return;
-    }
-    else
-    {
-        var context = renderer.context;
-        var transform = this.worldTransform;
-
-        if (this.blendMode !== renderer.currentBlendMode)
-        {
-            renderer.currentBlendMode = this.blendMode;
-            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.pushMask(this._mask, renderer);
-        }
-
-        var resolution = renderer.resolution;
-        context.setTransform(
-            transform.a * resolution,
-            transform.b * resolution,
-            transform.c * resolution,
-            transform.d * resolution,
-            transform.tx * resolution,
-            transform.ty * resolution
-        );
-
-        CanvasGraphics.renderGraphics(this, context);
-
-        for (var i = 0, j = this.children.length; i < j; ++i)
-        {
-            this.children[i].renderCanvas(renderer);
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.popMask(renderer);
-        }
-    }
-};
-
-/**
- * Retrieves the bounds of the graphic shape as a rectangle object
- *
- * @return {Rectangle} the rectangular bounding area
- */
-Graphics.prototype.getBounds = function (matrix)
-{
-    // return an empty object if the item is a mask!
-    if (this.isMask)
-    {
-        return math.Rectangle.EMPTY;
-    }
-
-    if (this.dirty)
-    {
-        this.updateLocalBounds();
-
-        this.glDirty = true;
-        this.cachedSpriteDirty = true;
-        this.dirty = false;
-    }
-
-    var bounds = this._localBounds;
-
-    var w0 = bounds.x;
-    var w1 = bounds.width + bounds.x;
-
-    var h0 = bounds.y;
-    var h1 = bounds.height + bounds.y;
-
-    var worldTransform = matrix || this.worldTransform;
-
-    var a = worldTransform.a;
-    var b = worldTransform.b;
-    var c = worldTransform.c;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
-
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
-
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
-
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
-
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
-
-    var maxX = x1;
-    var maxY = y1;
-
-    var minX = x1;
-    var minY = y1;
-
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
-
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
-
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
-
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
-
-    this._bounds.x = minX;
-    this._bounds.width = maxX - minX;
-
-    this._bounds.y = minY;
-    this._bounds.height = maxY - minY;
-
-    return this._bounds;
-};
-
-/**
- * Update the bounds of the object
- *
- */
-Graphics.prototype.updateLocalBounds = function ()
-{
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    if (this.graphicsData.length)
-    {
-        var shape, points, x, y, w, h;
-
-        for (var i = 0; i < this.graphicsData.length; i++)
-        {
-            var data = this.graphicsData[i];
-            var type = data.type;
-            var lineWidth = data.lineWidth;
-            shape = data.shape;
-
-            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
-            {
-                x = shape.x - lineWidth/2;
-                y = shape.y - lineWidth/2;
-                w = shape.width + lineWidth;
-                h = shape.height + lineWidth;
-
-                minX = x < minX ? x : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y < minY ? y : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.CIRC)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.radius + lineWidth/2;
-                h = shape.radius + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.ELIP)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.width + lineWidth/2;
-                h = shape.height + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else
-            {
-                // POLY
-                points = shape.points;
-
-                for (var j = 0; j < points.length; j += 2)
-                {
-                    x = points[j];
-                    y = points[j+1];
-
-                    minX = x-lineWidth < minX ? x-lineWidth : minX;
-                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
-
-                    minY = y-lineWidth < minY ? y-lineWidth : minY;
-                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
-                }
-            }
-        }
-    }
-    else
-    {
-        minX = 0;
-        maxX = 0;
-        minY = 0;
-        maxY = 0;
-    }
-
-    var padding = this.boundsPadding;
-
-    this._localBounds.x = minX - padding;
-    this._localBounds.width = (maxX - minX) + padding * 2;
-
-    this._localBounds.y = minY - padding;
-    this._localBounds.height = (maxY - minY) + padding * 2;
-};
-
-/**
- * Generates the cached sprite when the sprite has cacheAsBitmap = true
- *
- * @private
- */
-Graphics.prototype._generateCachedSprite = function ()
-{
-    var bounds = this.getLocalBounds();
-
-    if (!this._cachedSprite)
-    {
-        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
-        var texture = Texture.fromCanvas(canvasBuffer.canvas);
-
-        this._cachedSprite = new Sprite(texture);
-        this._cachedSprite.buffer = canvasBuffer;
-
-        this._cachedSprite.worldTransform = this.worldTransform;
-    }
-    else
-    {
-        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
-    }
-
-    // leverage the anchor to account for the offset of the element
-    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
-    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
-
-    // this._cachedSprite.buffer.context.save();
-    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
-
-    // make sure we set the alpha of the graphics to 1 for the render..
-    this.worldAlpha = 1;
-
-    // now render the graphic..
-    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
-
-    this._cachedSprite.alpha = this.alpha;
-};
-
-/**
- * Updates texture size based on canvas size
- *
- * @private
- */
-Graphics.prototype.updateCachedSpriteTexture = function ()
-{
-    var cachedSprite = this._cachedSprite;
-    var texture = cachedSprite.texture;
-    var canvas = cachedSprite.buffer.canvas;
-
-    texture.baseTexture.width = canvas.width;
-    texture.baseTexture.height = canvas.height;
-    texture.crop.width = texture.frame.width = canvas.width;
-    texture.crop.height = texture.frame.height = canvas.height;
-
-    cachedSprite._width = canvas.width;
-    cachedSprite._height = canvas.height;
-
-    // update the dirty base textures
-    texture.baseTexture.dirty();
-};
-
-/**
- * Destroys a previous cached sprite.
- *
- */
-Graphics.prototype.destroyCachedSprite = function ()
-{
-    this._cachedSprite.texture.destroy(true);
-
-    // let the gc collect the unused sprite
-    // TODO could be object pooled!
-    this._cachedSprite = null;
-};
-
-/**
- * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
- * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
- * @return {GraphicsData} The generated GraphicsData object.
- */
-Graphics.prototype.drawShape = function (shape)
-{
-    if (this.currentPath)
-    {
-        // check current path!
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.graphicsData.pop();
-        }
-    }
-
-    this.currentPath = null;
-
-    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
-
-    this.graphicsData.push(data);
-
-    if (data.type === CONST.SHAPES.POLY)
-    {
-        data.shape.closed = this.filling;
-        this.currentPath = data;
-    }
-
-    this.dirty = true;
-
-    return data;
-};
diff --git a/src/core/primitives/GraphicsData.js b/src/core/primitives/GraphicsData.js
deleted file mode 100644
index 788f6f2..0000000
--- a/src/core/primitives/GraphicsData.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * A GraphicsData object.
- *
- * @class
- * @namespace PIXI
- */
-function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
-{
-    this.lineWidth = lineWidth;
-    this.lineColor = lineColor;
-    this.lineAlpha = lineAlpha;
-    this._lineTint = lineColor;
-
-    this.fillColor = fillColor;
-    this.fillAlpha = fillAlpha;
-    this._fillTint = fillColor;
-    this.fill = fill;
-
-    this.shape = shape;
-    this.type = shape.type;
-}
-
-GraphicsData.prototype.constructor = GraphicsData;
-module.exports = GraphicsData;
-
-/**
- * Creates a new GraphicsData object with the same values as this one.
- *
- * @return {GraphicsData}
- */
-GraphicsData.prototype.clone = function ()
-{
-    return new GraphicsData(
-        this.lineWidth,
-        this.lineColor,
-        this.lineAlpha,
-        this.fillColor,
-        this.fillAlpha,
-        this.fill,
-        this.shape
-    );
-};
diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js
deleted file mode 100644
index b3010bd..0000000
--- a/src/core/primitives/webgl/GraphicsRenderer.js
+++ /dev/null
@@ -1,876 +0,0 @@
-var utils = require('../utils'),
-    math = require('../math'),
-    CONST = require('../const'),
-    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
-    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
-    WebGLGraphicsData = require('./WebGLGraphicsData');
-
-/**
- * Renders the graphics object.
- *
- * @class
- * @private
- * @namespace PIXI
- * @param renderer {WebGLRenderer} The renderer this object renderer works for.
- */
-function GraphicsRenderer(renderer)
-{
-    ObjectRenderer.call(this, renderer);
-
-    this.graphicsDataPool = [];
-}
-
-GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
-GraphicsRenderer.prototype.constructor = GraphicsRenderer;
-module.exports = GraphicsRenderer;
-
-WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
-
-/**
- * Destroys this renderer.
- *
- */
-GraphicsRenderer.prototype.destroy = function () {
-    ObjectRenderer.prototype.destroy.call(this);
-
-    this.graphicsDataPool = null;
-};
-
-/**
- * Renders a graphics object.
- *
- * @param graphics {Graphics} The graphics object to render.
- */
-GraphicsRenderer.prototype.render = function(graphics)
-{
-    var renderer = this.renderer;
-    var gl = renderer.gl;
-
-    var projection = renderer.projection,
-        offset = renderer.offset,
-        shader = renderer.shaderManager.primitiveShader,
-        webGLData;
-
-    if (graphics.dirty)
-    {
-        this.updateGraphics(graphics, gl);
-    }
-
-    var webGL = graphics._webGL[gl.id];
-
-    // This  could be speeded up for sure!
-
-    renderer.blendModeManager.setBlendMode( graphics.blendMode );
-
-//    var matrix =  graphics.worldTransform.clone();
-//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
-//    matrix.append(graphics.worldTransform);
-
-    for (var i = 0; i < webGL.data.length; i++)
-    {
-        if (webGL.data[i].mode === 1)
-        {
-            webGLData = webGL.data[i];
-
-            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
-
-            // render quad..
-            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
-
-            renderer.maskManager.popStencil(graphics, webGLData, renderer);
-        }
-        else
-        {
-            webGLData = webGL.data[i];
-
-
-            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
-            shader = renderer.shaderManager.primitiveShader;
-
-            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
-
-            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
-
-            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
-
-            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
-
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
-
-            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
-            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
-
-            // set the index buffer!
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
-            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
-        }
-    }
-};
-
-/**
- * Updates the graphics object
- *
- * @private
- * @param graphicsData {Graphics} The graphics object to update
- * @param gl {WebGLContext} the current WebGL drawing context
- */
-GraphicsRenderer.prototype.updateGraphics = function(graphics)
-{
-    var gl = this.renderer.gl;
-
-     // get the contexts graphics object
-    var webGL = graphics._webGL[gl.id];
-
-    // if the graphics object does not exist in the webGL context time to create it!
-    if (!webGL)
-    {
-        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
-    }
-
-    // flag the graphics as not dirty as we are about to update it...
-    graphics.dirty = false;
-
-    var i;
-
-    // if the user cleared the graphics object we will need to clear every object
-    if (graphics.clearDirty)
-    {
-        graphics.clearDirty = false;
-
-        // lop through and return all the webGLDatas to the object pool so than can be reused later on
-        for (i = 0; i < webGL.data.length; i++)
-        {
-            var graphicsData = webGL.data[i];
-            graphicsData.reset();
-            this.graphicsDataPool.push( graphicsData );
-        }
-
-        // clear the array and reset the index..
-        webGL.data = [];
-        webGL.lastIndex = 0;
-    }
-
-    var webGLData;
-
-    // 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
-    // other wise graphics objects will be pushed into a batch..
-    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
-    {
-        var data = graphics.graphicsData[i];
-
-        if (data.type === CONST.SHAPES.POLY)
-        {
-            // need to add the points the the graphics object..
-            data.points = data.shape.points.slice();
-            if (data.shape.closed)
-            {
-                // close the poly if the value is true!
-                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
-                {
-                    data.points.push(data.points[0], data.points[1]);
-                }
-            }
-
-            // MAKE SURE WE HAVE THE CORRECT TYPE..
-            if (data.fill)
-            {
-                if (data.points.length >= 6)
-                {
-                    if (data.points.length < 6 * 2)
-                    {
-                        webGLData = this.switchMode(webGL, 0);
-
-                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
-                   //     console.log(canDrawUsingSimple);
-
-                        if (!canDrawUsingSimple)
-                        {
-                        //    console.log("<>>>")
-                            webGLData = this.switchMode(webGL, 1);
-                            this.buildComplexPoly(data, webGLData);
-                        }
-
-                    }
-                    else
-                    {
-                        webGLData = this.switchMode(webGL, 1);
-                        this.buildComplexPoly(data, webGLData);
-                    }
-                }
-            }
-
-            if (data.lineWidth > 0)
-            {
-                webGLData = this.switchMode(webGL, 0);
-                this.buildLine(data, webGLData);
-            }
-        }
-        else
-        {
-            webGLData = this.switchMode(webGL, 0);
-
-            if (data.type === CONST.SHAPES.RECT)
-            {
-                this.buildRectangle(data, webGLData);
-            }
-            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
-            {
-                this.buildCircle(data, webGLData);
-            }
-            else if (data.type === CONST.SHAPES.RREC)
-            {
-                this.buildRoundedRectangle(data, webGLData);
-            }
-        }
-
-        webGL.lastIndex++;
-    }
-
-    // upload all the dirty data...
-    for (i = 0; i < webGL.data.length; i++)
-    {
-        webGLData = webGL.data[i];
-
-        if (webGLData.dirty)
-        {
-            webGLData.upload();
-        }
-    }
-};
-
-/**
- *
- *
- * @private
- * @param webGL {WebGLContext}
- * @param type {number}
- */
-GraphicsRenderer.prototype.switchMode = function (webGL, type)
-{
-    var webGLData;
-
-    if (!webGL.data.length)
-    {
-        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
-        webGLData.mode = type;
-        webGL.data.push(webGLData);
-    }
-    else
-    {
-        webGLData = webGL.data[webGL.data.length-1];
-
-        if (webGLData.mode !== type || type === 1)
-        {
-            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
-            webGLData.mode = type;
-            webGL.data.push(webGLData);
-        }
-    }
-
-    webGLData.dirty = true;
-
-    return webGLData;
-};
-
-/**
- * Builds a rectangle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
-{
-    // --- //
-    // need to convert points to a nice regular data
-    //
-    var rectData = graphicsData.shape;
-    var x = rectData.x;
-    var y = rectData.y;
-    var width = rectData.width;
-    var height = rectData.height;
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vertPos = verts.length/6;
-
-        // start
-        verts.push(x, y);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x + width, y);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x , y + height);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x + width, y + height);
-        verts.push(r, g, b, alpha);
-
-        // insert 2 dead triangles..
-        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = [x, y,
-                  x + width, y,
-                  x + width, y + height,
-                  x, y + height,
-                  x, y];
-
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Builds a rounded rectangle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
-{
-    var rrectData = graphicsData.shape;
-    var x = rrectData.x;
-    var y = rrectData.y;
-    var width = rrectData.width;
-    var height = rrectData.height;
-
-    var radius = rrectData.radius;
-
-    var recPoints = [];
-    recPoints.push(x, y + radius);
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vecPos = verts.length/6;
-
-        var triangles = utils.PolyK.Triangulate(recPoints);
-
-        //
-
-        var i = 0;
-        for (i = 0; i < triangles.length; i+=3)
-        {
-            indices.push(triangles[i] + vecPos);
-            indices.push(triangles[i] + vecPos);
-            indices.push(triangles[i+1] + vecPos);
-            indices.push(triangles[i+2] + vecPos);
-            indices.push(triangles[i+2] + vecPos);
-        }
-
-        for (i = 0; i < recPoints.length; i++)
-        {
-            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
-        }
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = recPoints;
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Calculate the points for a quadratic bezier curve. (helper function..)
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @private
- * @param fromX {number} Origin point x
- * @param fromY {number} Origin point x
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {number[]}
- */
-GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
-{
-
-    var xa,
-        ya,
-        xb,
-        yb,
-        x,
-        y,
-        n = 20,
-        points = [];
-
-    function getPt(n1 , n2, perc) {
-        var diff = n2 - n1;
-
-        return n1 + ( diff * perc );
-    }
-
-    var j = 0;
-    for (var i = 0; i <= n; i++ ) {
-        j = i / n;
-
-        // The Green Line
-        xa = getPt( fromX , cpX , j );
-        ya = getPt( fromY , cpY , j );
-        xb = getPt( cpX , toX , j );
-        yb = getPt( cpY , toY , j );
-
-        // The Black Dot
-        x = getPt( xa , xb , j );
-        y = getPt( ya , yb , j );
-
-        points.push(x, y);
-    }
-    return points;
-};
-
-/**
- * Builds a circle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object to draw
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
-{
-    // need to convert points to a nice regular data
-    var circleData = graphicsData.shape;
-    var x = circleData.x;
-    var y = circleData.y;
-    var width;
-    var height;
-
-    // TODO - bit hacky??
-    if (graphicsData.type === CONST.SHAPES.CIRC)
-    {
-        width = circleData.radius;
-        height = circleData.radius;
-    }
-    else
-    {
-        width = circleData.width;
-        height = circleData.height;
-    }
-
-    var totalSegs = 40;
-    var seg = (Math.PI * 2) / totalSegs ;
-
-    var i = 0;
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vecPos = verts.length/6;
-
-        indices.push(vecPos);
-
-        for (i = 0; i < totalSegs + 1 ; i++)
-        {
-            verts.push(x,y, r, g, b, alpha);
-
-            verts.push(x + Math.sin(seg * i) * width,
-                       y + Math.cos(seg * i) * height,
-                       r, g, b, alpha);
-
-            indices.push(vecPos++, vecPos++);
-        }
-
-        indices.push(vecPos-1);
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = [];
-
-        for (i = 0; i < totalSegs + 1; i++)
-        {
-            graphicsData.points.push(x + Math.sin(seg * i) * width,
-                                     y + Math.cos(seg * i) * height);
-        }
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Builds a line to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
-{
-    // TODO OPTIMISE!
-    var i = 0;
-    var points = graphicsData.points;
-
-    if (points.length === 0)
-    {
-        return;
-    }
-
-    // if the line width is an odd number add 0.5 to align to a whole pixel
-    if (graphicsData.lineWidth%2)
-    {
-        for (i = 0; i < points.length; i++)
-        {
-            points[i] += 0.5;
-        }
-    }
-
-    // get first and last point.. figure out the middle!
-    var firstPoint = new math.Point(points[0], points[1]);
-    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
-
-    // if the first point is the last point - gonna have issues :)
-    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
-    {
-        // need to clone as we are going to slightly modify the shape..
-        points = points.slice();
-
-        points.pop();
-        points.pop();
-
-        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
-
-        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
-        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
-
-        points.unshift(midPointX, midPointY);
-        points.push(midPointX, midPointY);
-    }
-
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-    var length = points.length / 2;
-    var indexCount = points.length;
-    var indexStart = verts.length/6;
-
-    // DRAW the Line
-    var width = graphicsData.lineWidth / 2;
-
-    // sort color
-    var color = utils.hex2rgb(graphicsData.lineColor);
-    var alpha = graphicsData.lineAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
-
-    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
-    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
-    var a1, b1, c1, a2, b2, c2;
-    var denom, pdist, dist;
-
-    p1x = points[0];
-    p1y = points[1];
-
-    p2x = points[2];
-    p2y = points[3];
-
-    perpx = -(p1y - p2y);
-    perpy =  p1x - p2x;
-
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
-
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
-
-    // start
-    verts.push(p1x - perpx , p1y - perpy,
-                r, g, b, alpha);
-
-    verts.push(p1x + perpx , p1y + perpy,
-                r, g, b, alpha);
-
-    for (i = 1; i < length-1; i++)
-    {
-        p1x = points[(i-1)*2];
-        p1y = points[(i-1)*2 + 1];
-
-        p2x = points[(i)*2];
-        p2y = points[(i)*2 + 1];
-
-        p3x = points[(i+1)*2];
-        p3y = points[(i+1)*2 + 1];
-
-        perpx = -(p1y - p2y);
-        perpy = p1x - p2x;
-
-        dist = Math.sqrt(perpx*perpx + perpy*perpy);
-        perpx /= dist;
-        perpy /= dist;
-        perpx *= width;
-        perpy *= width;
-
-        perp2x = -(p2y - p3y);
-        perp2y = p2x - p3x;
-
-        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
-        perp2x /= dist;
-        perp2y /= dist;
-        perp2x *= width;
-        perp2y *= width;
-
-        a1 = (-perpy + p1y) - (-perpy + p2y);
-        b1 = (-perpx + p2x) - (-perpx + p1x);
-        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
-        a2 = (-perp2y + p3y) - (-perp2y + p2y);
-        b2 = (-perp2x + p2x) - (-perp2x + p3x);
-        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
-
-        denom = a1*b2 - a2*b1;
-
-        if (Math.abs(denom) < 0.1 )
-        {
-
-            denom+=10.1;
-            verts.push(p2x - perpx , p2y - perpy,
-                r, g, b, alpha);
-
-            verts.push(p2x + perpx , p2y + perpy,
-                r, g, b, alpha);
-
-            continue;
-        }
-
-        px = (b1*c2 - b2*c1)/denom;
-        py = (a2*c1 - a1*c2)/denom;
-
-
-        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
-
-
-        if (pdist > 140 * 140)
-        {
-            perp3x = perpx - perp2x;
-            perp3y = perpy - perp2y;
-
-            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
-            perp3x /= dist;
-            perp3y /= dist;
-            perp3x *= width;
-            perp3y *= width;
-
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x + perp3x, p2y +perp3y);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
-
-            indexCount++;
-        }
-        else
-        {
-
-            verts.push(px , py);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x - (px-p2x), p2y - (py - p2y));
-            verts.push(r, g, b, alpha);
-        }
-    }
-
-    p1x = points[(length-2)*2];
-    p1y = points[(length-2)*2 + 1];
-
-    p2x = points[(length-1)*2];
-    p2y = points[(length-1)*2 + 1];
-
-    perpx = -(p1y - p2y);
-    perpy = p1x - p2x;
-
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
-
-    verts.push(p2x - perpx , p2y - perpy);
-    verts.push(r, g, b, alpha);
-
-    verts.push(p2x + perpx , p2y + perpy);
-    verts.push(r, g, b, alpha);
-
-    indices.push(indexStart);
-
-    for (i = 0; i < indexCount; i++)
-    {
-        indices.push(indexStart++);
-    }
-
-    indices.push(indexStart-1);
-};
-
-/**
- * Builds a complex polygon to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
-{
-    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
-    var points = graphicsData.points.slice();
-
-    if (points.length < 6)
-    {
-        return;
-    }
-
-    // get first and last point.. figure out the middle!
-    var indices = webGLData.indices;
-    webGLData.points = points;
-    webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
-
-    // calclate the bounds..
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    var x,y;
-
-    // get size..
-    for (var i = 0; i < points.length; i+=2)
-    {
-        x = points[i];
-        y = points[i+1];
-
-        minX = x < minX ? x : minX;
-        maxX = x > maxX ? x : maxX;
-
-        minY = y < minY ? y : minY;
-        maxY = y > maxY ? y : maxY;
-    }
-
-    // add a quad to the end cos there is no point making another buffer!
-    points.push(minX, minY,
-                maxX, minY,
-                maxX, maxY,
-                minX, maxY);
-
-    // push a quad onto the end..
-
-    //TODO - this aint needed!
-    var length = points.length / 2;
-    for (i = 0; i < length; i++)
-    {
-        indices.push( i );
-    }
-
-};
-
-/**
- * Builds a polygon to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
-{
-    var points = graphicsData.points;
-
-    if (points.length < 6)
-    {
-        return;
-    }
-
-    // get first and last point.. figure out the middle!
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-
-    var length = points.length / 2;
-
-    // sort color
-    var color = utils.hex2rgb(graphicsData.fillColor);
-    var alpha = graphicsData.fillAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
-
-    var triangles = utils.PolyK.Triangulate(points);
-
-    if (!triangles) {
-        return false;
-    }
-
-    var vertPos = verts.length / 6;
-
-    var i = 0;
-
-    for (i = 0; i < triangles.length; i+=3)
-    {
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i+1] + vertPos);
-        indices.push(triangles[i+2] +vertPos);
-        indices.push(triangles[i+2] + vertPos);
-    }
-
-    for (i = 0; i < length; i++)
-    {
-        verts.push(points[i * 2], points[i * 2 + 1],
-                   r, g, b, alpha);
-    }
-
-    return true;
-};

diff --git a/src/core/graphics/Graphics.js b/src/core/graphics/Graphics.js
new file mode 100644
index 0000000..8db9b45
--- /dev/null
+++ b/src/core/graphics/Graphics.js
@@ -0,0 +1,1116 @@
+var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
+    //Sprite = require('../display/Sprite'),
+    Texture = require('../textures/Texture'),
+    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
+    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
+   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
+    GraphicsData = require('./GraphicsData'),
+    math = require('../math'),
+    CONST = require('../const');
+
+/**
+ * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
+ * rectangles to the display, and color and fill them.
+ *
+ * @class
+ * @extends DisplayObjectContainer
+ * @namespace PIXI
+ */
+function Graphics()
+{
+    DisplayObjectContainer.call(this);
+
+    this.renderable = true;
+
+    /**
+     * The alpha value used when filling the Graphics object.
+     *
+     * @member {number}
+     * @default 1
+     */
+    this.fillAlpha = 1;
+
+    /**
+     * The width (thickness) of any lines drawn.
+     *
+     * @member {number}
+     * @default 0
+     */
+    this.lineWidth = 0;
+
+    /**
+     * The color of any lines drawn.
+     *
+     * @member {string}
+     * @default 0
+     */
+    this.lineColor = 0;
+
+    /**
+     * Graphics data
+     *
+     * @member {GraphicsData[]}
+     * @private
+     */
+    this.graphicsData = [];
+
+    /**
+     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
+     *
+     * @member {number}
+     * @default 0xFFFFFF
+     */
+    this.tint = 0xFFFFFF;
+
+    /**
+     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
+     *
+     * @member {number}
+     * @default CONST.blendModes.NORMAL;
+     */
+    this.blendMode = CONST.blendModes.NORMAL;
+
+    /**
+     * Current path
+     *
+     * @member {GraphicsData}
+     * @private
+     */
+    this.currentPath = null;
+
+    /**
+     * Array containing some WebGL-related properties used by the WebGL renderer.
+     *
+     * @member {object<number, object>}
+     * @private
+     */
+    // TODO - _webgl should use a prototype object, not a random undocumented object...
+    this._webGL = {};
+
+    /**
+     * Whether this shape is being used as a mask.
+     *
+     * @member {boolean}
+     */
+    this.isMask = false;
+
+    /**
+     * The bounds' padding used for bounds calculation.
+     *
+     * @member {number}
+     */
+    this.boundsPadding = 0;
+
+    /**
+     * A cache of the local bounds to prevent recalculation.
+     *
+     * @member {Rectangle}
+     * @private
+     */
+    this._localBounds = new math.Rectangle(0,0,1,1);
+
+    /**
+     * Used to detect if the graphics object has changed. If this is set to true then the graphics
+     * object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.dirty = true;
+
+    /**
+     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
+     * graphics object will be recalculated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.glDirty = false;
+
+    /**
+     * Used to detect if the cached sprite object needs to be updated.
+     *
+     * @member {boolean}
+     * @private
+     */
+    this.cachedSpriteDirty = false;
+}
+
+// constructor
+Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
+Graphics.prototype.constructor = Graphics;
+module.exports = Graphics;
+
+Object.defineProperties(Graphics.prototype, {
+    /**
+     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
+     * This is useful if your graphics element does not change often, as it will speed up the rendering
+     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
+     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
+     * you are constantly redrawing the graphics element.
+     *
+     * @member {boolean}
+     * @memberof Graphics#
+     * @default false
+     * @private
+     */
+    cacheAsBitmap: {
+        get: function ()
+        {
+            return this._cacheAsBitmap;
+        },
+        set: function (value)
+        {
+            this._cacheAsBitmap = value;
+
+            if (this._cacheAsBitmap)
+            {
+                this._generateCachedSprite();
+            }
+            else
+            {
+                this.destroyCachedSprite();
+                this.dirty = true;
+            }
+        }
+    }
+});
+
+/**
+ * Creates a new Graphics object with the same values as this one.
+ *
+ * @return {Graphics}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    var clone = new Graphics();
+
+    clone.renderable    = this.renderable;
+    clone.fillAlpha     = this.fillAlpha;
+    clone.lineWidth     = this.lineWidth;
+    clone.lineColor     = this.lineColor;
+    clone.tint          = this.tint;
+    clone.blendMode     = this.blendMode;
+    clone.isMask        = this.isMask;
+    clone.boundsPadding = this.boundsPadding;
+    clone.dirty         = this.dirty;
+    clone.glDirty       = this.glDirty;
+    clone.cachedSpriteDirty = this.cachedSpriteDirty;
+
+    // copy graphics data
+    for (var i = 0; i < this.graphicsData.length; ++i)
+    {
+        clone.graphicsData.push(this.graphicsData.clone());
+    }
+
+    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
+
+    clone.updateLocalBounds();
+
+    return clone;
+};
+
+/**
+ * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
+ *
+ * @param lineWidth {number} width of the line to draw, will update the objects stored style
+ * @param color {number} color of the line to draw, will update the objects stored style
+ * @param alpha {number} alpha of the line to draw, will update the objects stored style
+ * @return {Graphics}
+ */
+Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
+{
+    this.lineWidth = lineWidth || 0;
+    this.lineColor = color || 0;
+    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length)
+        {
+            // halfway through a line? start a new one!
+            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
+        }
+        else
+        {
+            // otherwise its empty so lets just set the line properties
+            this.currentPath.lineWidth = this.lineWidth;
+            this.currentPath.lineColor = this.lineColor;
+            this.currentPath.lineAlpha = this.lineAlpha;
+        }
+    }
+
+    return this;
+};
+
+/**
+ * Moves the current drawing position to x, y.
+ *
+ * @param x {number} the X coordinate to move to
+ * @param y {number} the Y coordinate to move to
+ * @return {Graphics}
+  */
+Graphics.prototype.moveTo = function (x, y)
+{
+    this.drawShape(new math.Polygon([x,y]));
+
+    return this;
+};
+
+/**
+ * Draws a line using the current line style from the current drawing position to (x, y);
+ * The current drawing position is then set to (x, y).
+ *
+ * @param x {number} the X coordinate to draw to
+ * @param y {number} the Y coordinate to draw to
+ * @return {Graphics}
+ */
+Graphics.prototype.lineTo = function (x, y)
+{
+    this.currentPath.shape.points.push(x, y);
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve and then draws it.
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var xa,
+        ya,
+        n = 20,
+        points = this.currentPath.shape.points;
+
+    if (points.length === 0)
+    {
+        this.moveTo(0, 0);
+    }
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        xa = fromX + ( (cpX - fromX) * j );
+        ya = fromY + ( (cpY - fromY) * j );
+
+        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
+                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Calculate the points for a bezier curve and then draws it.
+ *
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param cpX2 {number} Second Control point x
+ * @param cpY2 {number} Second Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {Graphics}
+ */
+Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points = [0, 0];
+        }
+    }
+    else
+    {
+        this.moveTo(0,0);
+    }
+
+    var n = 20,
+        dt,
+        dt2,
+        dt3,
+        t2,
+        t3,
+        points = this.currentPath.shape.points;
+
+    var fromX = points[points.length-2];
+    var fromY = points[points.length-1];
+
+    var j = 0;
+
+    for (var i = 1; i <= n; ++i)
+    {
+        j = i / n;
+
+        dt = (1 - j);
+        dt2 = dt * dt;
+        dt3 = dt2 * dt;
+
+        t2 = j * j;
+        t3 = t2 * j;
+
+        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
+                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arcTo() method creates an arc/curve between two tangents on the canvas.
+ *
+ * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
+ *
+ * @param x1 {number} The x-coordinate of the beginning of the arc
+ * @param y1 {number} The y-coordinate of the beginning of the arc
+ * @param x2 {number} The x-coordinate of the end of the arc
+ * @param y2 {number} The y-coordinate of the end of the arc
+ * @param radius {number} The radius of the arc
+ * @return {Graphics}
+ */
+Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
+{
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length === 0)
+        {
+            this.currentPath.shape.points.push(x1, y1);
+        }
+    }
+    else
+    {
+        this.moveTo(x1, y1);
+    }
+
+    var points = this.currentPath.shape.points,
+        fromX = points[points.length-2],
+        fromY = points[points.length-1],
+        a1 = fromY - y1,
+        b1 = fromX - x1,
+        a2 = y2   - y1,
+        b2 = x2   - x1,
+        mm = Math.abs(a1 * b2 - b1 * a2);
+
+    if (mm < 1.0e-8 || radius === 0)
+    {
+        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
+        {
+            points.push(x1, y1);
+        }
+    }
+    else
+    {
+        var dd = a1 * a1 + b1 * b1,
+            cc = a2 * a2 + b2 * b2,
+            tt = a1 * a2 + b1 * b2,
+            k1 = radius * Math.sqrt(dd) / mm,
+            k2 = radius * Math.sqrt(cc) / mm,
+            j1 = k1 * tt / dd,
+            j2 = k2 * tt / cc,
+            cx = k1 * b2 + k2 * b1,
+            cy = k1 * a2 + k2 * a1,
+            px = b1 * (k2 + j1),
+            py = a1 * (k2 + j1),
+            qx = b2 * (k1 + j2),
+            qy = a2 * (k1 + j2),
+            startAngle = Math.atan2(py - cy, px - cx),
+            endAngle   = Math.atan2(qy - cy, qx - cx);
+
+        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * The arc method creates an arc/curve (used to create circles, or parts of circles).
+ *
+ * @param cx {number} The x-coordinate of the center of the circle
+ * @param cy {number} The y-coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
+ * @param endAngle {number} The ending angle, in radians
+ * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
+ * @return {Graphics}
+ */
+Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
+{
+    var startX = cx + Math.cos(startAngle) * radius;
+    var startY = cy + Math.sin(startAngle) * radius;
+    var points;
+
+    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
+    if (this.currentPath)
+    {
+        points = this.currentPath.shape.points;
+
+        if (points.length === 0)
+        {
+            points.push(startX, startY);
+        }
+        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
+        {
+            points.push(startX, startY);
+        }
+    }
+    else
+    {
+        this.moveTo(startX, startY);
+        points = this.currentPath.shape.points;
+    }
+
+    if (startAngle === endAngle)
+    {
+        return this;
+    }
+
+    if (!anticlockwise && endAngle <= startAngle)
+    {
+        endAngle += Math.PI * 2;
+    }
+    else if (anticlockwise && startAngle <= endAngle)
+    {
+        startAngle += Math.PI * 2;
+    }
+
+    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
+    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
+
+    if (sweep === 0)
+    {
+        return this;
+    }
+
+    var theta = sweep/(segs*2);
+    var theta2 = theta*2;
+
+    var cTheta = Math.cos(theta);
+    var sTheta = Math.sin(theta);
+
+    var segMinus = segs - 1;
+
+    var remainder = ( segMinus % 1 ) / segMinus;
+
+    for (var i = 0; i <= segMinus; ++i)
+    {
+        var real =  i + remainder * i;
+        var angle = ((theta) + startAngle + (theta2 * real));
+
+        var c = Math.cos(angle);
+        var s = -Math.sin(angle);
+
+        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
+                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
+    }
+
+    this.dirty = true;
+
+    return this;
+};
+
+/**
+ * Specifies a simple one-color fill that subsequent calls to other Graphics methods
+ * (such as lineTo() or drawCircle()) use when drawing.
+ *
+ * @param color {number} the color of the fill
+ * @param alpha {number} the alpha of the fill
+ * @return {Graphics}
+ */
+Graphics.prototype.beginFill = function (color, alpha)
+{
+    this.filling = true;
+    this.fillColor = color || 0;
+    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
+
+    if (this.currentPath)
+    {
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.currentPath.fill = this.filling;
+            this.currentPath.fillColor = this.fillColor;
+            this.currentPath.fillAlpha = this.fillAlpha;
+        }
+    }
+    return this;
+};
+
+/**
+ * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.endFill = function ()
+{
+    this.filling = false;
+    this.fillColor = null;
+    this.fillAlpha = 1;
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawRect = function ( x, y, width, height )
+{
+    this.drawShape(new math.Rectangle(x,y, width, height));
+
+    return this;
+};
+
+/**
+ *
+ * @param x {number} The X coord of the top-left of the rectangle
+ * @param y {number} The Y coord of the top-left of the rectangle
+ * @param width {number} The width of the rectangle
+ * @param height {number} The height of the rectangle
+ * @param radius {number} Radius of the rectangle corners
+ */
+Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
+{
+    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
+
+    return this;
+};
+
+/**
+ * Draws a circle.
+ *
+ * @param x {number} The X coordinate of the center of the circle
+ * @param y {number} The Y coordinate of the center of the circle
+ * @param radius {number} The radius of the circle
+ * @return {Graphics}
+ */
+Graphics.prototype.drawCircle = function (x, y, radius)
+{
+    this.drawShape(new math.Circle(x,y, radius));
+
+    return this;
+};
+
+/**
+ * Draws an ellipse.
+ *
+ * @param x {number} The X coordinate of the center of the ellipse
+ * @param y {number} The Y coordinate of the center of the ellipse
+ * @param width {number} The half width of the ellipse
+ * @param height {number} The half height of the ellipse
+ * @return {Graphics}
+ */
+Graphics.prototype.drawEllipse = function (x, y, width, height)
+{
+    this.drawShape(new math.Ellipse(x, y, width, height));
+
+    return this;
+};
+
+/**
+ * Draws a polygon using the given path.
+ *
+ * @param path {Array} The path data used to construct the polygon.
+ * @return {Graphics}
+ */
+Graphics.prototype.drawPolygon = function (path)
+{
+    if (!(path instanceof Array))
+    {
+        path = Array.prototype.slice.call(arguments);
+    }
+
+    this.drawShape(new math.Polygon(path));
+
+    return this;
+};
+
+/**
+ * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
+ *
+ * @return {Graphics}
+ */
+Graphics.prototype.clear = function ()
+{
+    this.lineWidth = 0;
+    this.filling = false;
+
+    this.dirty = true;
+    this.clearDirty = true;
+    this.graphicsData = [];
+
+    return this;
+};
+
+/**
+ * Useful function that returns a texture of the graphics object that can then be used to create sprites
+ * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
+ *
+ * @param resolution {number} The resolution of the texture being generated
+ * @param scaleMode {number} Should be one of the scaleMode consts
+ * @return {Texture} a texture of the graphics object
+ */
+Graphics.prototype.generateTexture = function (resolution, scaleMode)
+{
+    resolution = resolution || 1;
+
+    var bounds = this.getBounds();
+
+    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
+
+    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
+    texture.baseTexture.resolution = resolution;
+
+    canvasBuffer.context.scale(resolution, resolution);
+
+    canvasBuffer.context.translate(-bounds.x,-bounds.y);
+
+    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
+
+    return texture;
+};
+
+/**
+ * Renders the object using the WebGL renderer
+ *
+ * @param renderer {WebGLRenderer}
+ */
+Graphics.prototype._renderWebGL = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (this.isMask === true)
+    {
+        return;
+    }
+
+    // this code may still be needed so leaving for now..
+    //
+    /*
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture on the gpu too!
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.worldAlpha = this.worldAlpha;
+
+        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
+
+        return;
+    }
+
+    */
+
+    if (this.glDirty)
+    {
+        this.dirty = true;
+        this.glDirty = false;
+    }
+
+    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
+    renderer.objectRenderers.graphics.render(this);
+
+};
+
+/**
+ * Renders the object using the Canvas renderer
+ *
+ * @param renderer {CanvasRenderer}
+ * @private
+ */
+Graphics.prototype.renderCanvas = function (renderer)
+{
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
+    if (!this.visible || this.alpha <= 0 || this.isMask === true)
+    {
+        return;
+    }
+
+    if (this._cacheAsBitmap)
+    {
+        if (this.dirty || this.cachedSpriteDirty)
+        {
+            this._generateCachedSprite();
+
+            // we will also need to update the texture
+            this.updateCachedSpriteTexture();
+
+            this.cachedSpriteDirty = false;
+            this.dirty = false;
+        }
+
+        this._cachedSprite.alpha = this.alpha;
+
+        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
+
+        return;
+    }
+    else
+    {
+        var context = renderer.context;
+        var transform = this.worldTransform;
+
+        if (this.blendMode !== renderer.currentBlendMode)
+        {
+            renderer.currentBlendMode = this.blendMode;
+            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.pushMask(this._mask, renderer);
+        }
+
+        var resolution = renderer.resolution;
+        context.setTransform(
+            transform.a * resolution,
+            transform.b * resolution,
+            transform.c * resolution,
+            transform.d * resolution,
+            transform.tx * resolution,
+            transform.ty * resolution
+        );
+
+        CanvasGraphics.renderGraphics(this, context);
+
+        for (var i = 0, j = this.children.length; i < j; ++i)
+        {
+            this.children[i].renderCanvas(renderer);
+        }
+
+        if (this._mask)
+        {
+            renderer.maskManager.popMask(renderer);
+        }
+    }
+};
+
+/**
+ * Retrieves the bounds of the graphic shape as a rectangle object
+ *
+ * @return {Rectangle} the rectangular bounding area
+ */
+Graphics.prototype.getBounds = function (matrix)
+{
+    // return an empty object if the item is a mask!
+    if (this.isMask)
+    {
+        return math.Rectangle.EMPTY;
+    }
+
+    if (this.dirty)
+    {
+        this.updateLocalBounds();
+
+        this.glDirty = true;
+        this.cachedSpriteDirty = true;
+        this.dirty = false;
+    }
+
+    var bounds = this._localBounds;
+
+    var w0 = bounds.x;
+    var w1 = bounds.width + bounds.x;
+
+    var h0 = bounds.y;
+    var h1 = bounds.height + bounds.y;
+
+    var worldTransform = matrix || this.worldTransform;
+
+    var a = worldTransform.a;
+    var b = worldTransform.b;
+    var c = worldTransform.c;
+    var d = worldTransform.d;
+    var tx = worldTransform.tx;
+    var ty = worldTransform.ty;
+
+    var x1 = a * w1 + c * h1 + tx;
+    var y1 = d * h1 + b * w1 + ty;
+
+    var x2 = a * w0 + c * h1 + tx;
+    var y2 = d * h1 + b * w0 + ty;
+
+    var x3 = a * w0 + c * h0 + tx;
+    var y3 = d * h0 + b * w0 + ty;
+
+    var x4 =  a * w1 + c * h0 + tx;
+    var y4 =  d * h0 + b * w1 + ty;
+
+    var maxX = x1;
+    var maxY = y1;
+
+    var minX = x1;
+    var minY = y1;
+
+    minX = x2 < minX ? x2 : minX;
+    minX = x3 < minX ? x3 : minX;
+    minX = x4 < minX ? x4 : minX;
+
+    minY = y2 < minY ? y2 : minY;
+    minY = y3 < minY ? y3 : minY;
+    minY = y4 < minY ? y4 : minY;
+
+    maxX = x2 > maxX ? x2 : maxX;
+    maxX = x3 > maxX ? x3 : maxX;
+    maxX = x4 > maxX ? x4 : maxX;
+
+    maxY = y2 > maxY ? y2 : maxY;
+    maxY = y3 > maxY ? y3 : maxY;
+    maxY = y4 > maxY ? y4 : maxY;
+
+    this._bounds.x = minX;
+    this._bounds.width = maxX - minX;
+
+    this._bounds.y = minY;
+    this._bounds.height = maxY - minY;
+
+    return this._bounds;
+};
+
+/**
+ * Update the bounds of the object
+ *
+ */
+Graphics.prototype.updateLocalBounds = function ()
+{
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    if (this.graphicsData.length)
+    {
+        var shape, points, x, y, w, h;
+
+        for (var i = 0; i < this.graphicsData.length; i++)
+        {
+            var data = this.graphicsData[i];
+            var type = data.type;
+            var lineWidth = data.lineWidth;
+            shape = data.shape;
+
+            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
+            {
+                x = shape.x - lineWidth/2;
+                y = shape.y - lineWidth/2;
+                w = shape.width + lineWidth;
+                h = shape.height + lineWidth;
+
+                minX = x < minX ? x : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y < minY ? y : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.CIRC)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.radius + lineWidth/2;
+                h = shape.radius + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else if (type === CONST.SHAPES.ELIP)
+            {
+                x = shape.x;
+                y = shape.y;
+                w = shape.width + lineWidth/2;
+                h = shape.height + lineWidth/2;
+
+                minX = x - w < minX ? x - w : minX;
+                maxX = x + w > maxX ? x + w : maxX;
+
+                minY = y - h < minY ? y - h : minY;
+                maxY = y + h > maxY ? y + h : maxY;
+            }
+            else
+            {
+                // POLY
+                points = shape.points;
+
+                for (var j = 0; j < points.length; j += 2)
+                {
+                    x = points[j];
+                    y = points[j+1];
+
+                    minX = x-lineWidth < minX ? x-lineWidth : minX;
+                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
+
+                    minY = y-lineWidth < minY ? y-lineWidth : minY;
+                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
+                }
+            }
+        }
+    }
+    else
+    {
+        minX = 0;
+        maxX = 0;
+        minY = 0;
+        maxY = 0;
+    }
+
+    var padding = this.boundsPadding;
+
+    this._localBounds.x = minX - padding;
+    this._localBounds.width = (maxX - minX) + padding * 2;
+
+    this._localBounds.y = minY - padding;
+    this._localBounds.height = (maxY - minY) + padding * 2;
+};
+
+/**
+ * Generates the cached sprite when the sprite has cacheAsBitmap = true
+ *
+ * @private
+ */
+Graphics.prototype._generateCachedSprite = function ()
+{
+    var bounds = this.getLocalBounds();
+
+    if (!this._cachedSprite)
+    {
+        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
+        var texture = Texture.fromCanvas(canvasBuffer.canvas);
+
+        this._cachedSprite = new Sprite(texture);
+        this._cachedSprite.buffer = canvasBuffer;
+
+        this._cachedSprite.worldTransform = this.worldTransform;
+    }
+    else
+    {
+        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
+    }
+
+    // leverage the anchor to account for the offset of the element
+    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
+    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
+
+    // this._cachedSprite.buffer.context.save();
+    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
+
+    // make sure we set the alpha of the graphics to 1 for the render..
+    this.worldAlpha = 1;
+
+    // now render the graphic..
+    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
+
+    this._cachedSprite.alpha = this.alpha;
+};
+
+/**
+ * Updates texture size based on canvas size
+ *
+ * @private
+ */
+Graphics.prototype.updateCachedSpriteTexture = function ()
+{
+    var cachedSprite = this._cachedSprite;
+    var texture = cachedSprite.texture;
+    var canvas = cachedSprite.buffer.canvas;
+
+    texture.baseTexture.width = canvas.width;
+    texture.baseTexture.height = canvas.height;
+    texture.crop.width = texture.frame.width = canvas.width;
+    texture.crop.height = texture.frame.height = canvas.height;
+
+    cachedSprite._width = canvas.width;
+    cachedSprite._height = canvas.height;
+
+    // update the dirty base textures
+    texture.baseTexture.dirty();
+};
+
+/**
+ * Destroys a previous cached sprite.
+ *
+ */
+Graphics.prototype.destroyCachedSprite = function ()
+{
+    this._cachedSprite.texture.destroy(true);
+
+    // let the gc collect the unused sprite
+    // TODO could be object pooled!
+    this._cachedSprite = null;
+};
+
+/**
+ * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
+ *
+ * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
+ * @return {GraphicsData} The generated GraphicsData object.
+ */
+Graphics.prototype.drawShape = function (shape)
+{
+    if (this.currentPath)
+    {
+        // check current path!
+        if (this.currentPath.shape.points.length <= 2)
+        {
+            this.graphicsData.pop();
+        }
+    }
+
+    this.currentPath = null;
+
+    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
+
+    this.graphicsData.push(data);
+
+    if (data.type === CONST.SHAPES.POLY)
+    {
+        data.shape.closed = this.filling;
+        this.currentPath = data;
+    }
+
+    this.dirty = true;
+
+    return data;
+};
diff --git a/src/core/graphics/GraphicsData.js b/src/core/graphics/GraphicsData.js
new file mode 100644
index 0000000..788f6f2
--- /dev/null
+++ b/src/core/graphics/GraphicsData.js
@@ -0,0 +1,42 @@
+/**
+ * A GraphicsData object.
+ *
+ * @class
+ * @namespace PIXI
+ */
+function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
+{
+    this.lineWidth = lineWidth;
+    this.lineColor = lineColor;
+    this.lineAlpha = lineAlpha;
+    this._lineTint = lineColor;
+
+    this.fillColor = fillColor;
+    this.fillAlpha = fillAlpha;
+    this._fillTint = fillColor;
+    this.fill = fill;
+
+    this.shape = shape;
+    this.type = shape.type;
+}
+
+GraphicsData.prototype.constructor = GraphicsData;
+module.exports = GraphicsData;
+
+/**
+ * Creates a new GraphicsData object with the same values as this one.
+ *
+ * @return {GraphicsData}
+ */
+GraphicsData.prototype.clone = function ()
+{
+    return new GraphicsData(
+        this.lineWidth,
+        this.lineColor,
+        this.lineAlpha,
+        this.fillColor,
+        this.fillAlpha,
+        this.fill,
+        this.shape
+    );
+};
diff --git a/src/core/graphics/webgl/GraphicsRenderer.js b/src/core/graphics/webgl/GraphicsRenderer.js
new file mode 100644
index 0000000..b3010bd
--- /dev/null
+++ b/src/core/graphics/webgl/GraphicsRenderer.js
@@ -0,0 +1,876 @@
+var utils = require('../utils'),
+    math = require('../math'),
+    CONST = require('../const'),
+    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
+    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
+    WebGLGraphicsData = require('./WebGLGraphicsData');
+
+/**
+ * Renders the graphics object.
+ *
+ * @class
+ * @private
+ * @namespace PIXI
+ * @param renderer {WebGLRenderer} The renderer this object renderer works for.
+ */
+function GraphicsRenderer(renderer)
+{
+    ObjectRenderer.call(this, renderer);
+
+    this.graphicsDataPool = [];
+}
+
+GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
+GraphicsRenderer.prototype.constructor = GraphicsRenderer;
+module.exports = GraphicsRenderer;
+
+WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
+
+/**
+ * Destroys this renderer.
+ *
+ */
+GraphicsRenderer.prototype.destroy = function () {
+    ObjectRenderer.prototype.destroy.call(this);
+
+    this.graphicsDataPool = null;
+};
+
+/**
+ * Renders a graphics object.
+ *
+ * @param graphics {Graphics} The graphics object to render.
+ */
+GraphicsRenderer.prototype.render = function(graphics)
+{
+    var renderer = this.renderer;
+    var gl = renderer.gl;
+
+    var projection = renderer.projection,
+        offset = renderer.offset,
+        shader = renderer.shaderManager.primitiveShader,
+        webGLData;
+
+    if (graphics.dirty)
+    {
+        this.updateGraphics(graphics, gl);
+    }
+
+    var webGL = graphics._webGL[gl.id];
+
+    // This  could be speeded up for sure!
+
+    renderer.blendModeManager.setBlendMode( graphics.blendMode );
+
+//    var matrix =  graphics.worldTransform.clone();
+//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
+//    matrix.append(graphics.worldTransform);
+
+    for (var i = 0; i < webGL.data.length; i++)
+    {
+        if (webGL.data[i].mode === 1)
+        {
+            webGLData = webGL.data[i];
+
+            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
+
+            // render quad..
+            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
+
+            renderer.maskManager.popStencil(graphics, webGLData, renderer);
+        }
+        else
+        {
+            webGLData = webGL.data[i];
+
+
+            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
+            shader = renderer.shaderManager.primitiveShader;
+
+            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
+
+            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
+
+            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
+
+            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
+
+
+            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
+
+            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
+            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
+
+            // set the index buffer!
+            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
+            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
+        }
+    }
+};
+
+/**
+ * Updates the graphics object
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to update
+ * @param gl {WebGLContext} the current WebGL drawing context
+ */
+GraphicsRenderer.prototype.updateGraphics = function(graphics)
+{
+    var gl = this.renderer.gl;
+
+     // get the contexts graphics object
+    var webGL = graphics._webGL[gl.id];
+
+    // if the graphics object does not exist in the webGL context time to create it!
+    if (!webGL)
+    {
+        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
+    }
+
+    // flag the graphics as not dirty as we are about to update it...
+    graphics.dirty = false;
+
+    var i;
+
+    // if the user cleared the graphics object we will need to clear every object
+    if (graphics.clearDirty)
+    {
+        graphics.clearDirty = false;
+
+        // lop through and return all the webGLDatas to the object pool so than can be reused later on
+        for (i = 0; i < webGL.data.length; i++)
+        {
+            var graphicsData = webGL.data[i];
+            graphicsData.reset();
+            this.graphicsDataPool.push( graphicsData );
+        }
+
+        // clear the array and reset the index..
+        webGL.data = [];
+        webGL.lastIndex = 0;
+    }
+
+    var webGLData;
+
+    // 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
+    // other wise graphics objects will be pushed into a batch..
+    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
+    {
+        var data = graphics.graphicsData[i];
+
+        if (data.type === CONST.SHAPES.POLY)
+        {
+            // need to add the points the the graphics object..
+            data.points = data.shape.points.slice();
+            if (data.shape.closed)
+            {
+                // close the poly if the value is true!
+                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
+                {
+                    data.points.push(data.points[0], data.points[1]);
+                }
+            }
+
+            // MAKE SURE WE HAVE THE CORRECT TYPE..
+            if (data.fill)
+            {
+                if (data.points.length >= 6)
+                {
+                    if (data.points.length < 6 * 2)
+                    {
+                        webGLData = this.switchMode(webGL, 0);
+
+                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
+                   //     console.log(canDrawUsingSimple);
+
+                        if (!canDrawUsingSimple)
+                        {
+                        //    console.log("<>>>")
+                            webGLData = this.switchMode(webGL, 1);
+                            this.buildComplexPoly(data, webGLData);
+                        }
+
+                    }
+                    else
+                    {
+                        webGLData = this.switchMode(webGL, 1);
+                        this.buildComplexPoly(data, webGLData);
+                    }
+                }
+            }
+
+            if (data.lineWidth > 0)
+            {
+                webGLData = this.switchMode(webGL, 0);
+                this.buildLine(data, webGLData);
+            }
+        }
+        else
+        {
+            webGLData = this.switchMode(webGL, 0);
+
+            if (data.type === CONST.SHAPES.RECT)
+            {
+                this.buildRectangle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
+            {
+                this.buildCircle(data, webGLData);
+            }
+            else if (data.type === CONST.SHAPES.RREC)
+            {
+                this.buildRoundedRectangle(data, webGLData);
+            }
+        }
+
+        webGL.lastIndex++;
+    }
+
+    // upload all the dirty data...
+    for (i = 0; i < webGL.data.length; i++)
+    {
+        webGLData = webGL.data[i];
+
+        if (webGLData.dirty)
+        {
+            webGLData.upload();
+        }
+    }
+};
+
+/**
+ *
+ *
+ * @private
+ * @param webGL {WebGLContext}
+ * @param type {number}
+ */
+GraphicsRenderer.prototype.switchMode = function (webGL, type)
+{
+    var webGLData;
+
+    if (!webGL.data.length)
+    {
+        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+        webGLData.mode = type;
+        webGL.data.push(webGLData);
+    }
+    else
+    {
+        webGLData = webGL.data[webGL.data.length-1];
+
+        if (webGLData.mode !== type || type === 1)
+        {
+            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
+            webGLData.mode = type;
+            webGL.data.push(webGLData);
+        }
+    }
+
+    webGLData.dirty = true;
+
+    return webGLData;
+};
+
+/**
+ * Builds a rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
+{
+    // --- //
+    // need to convert points to a nice regular data
+    //
+    var rectData = graphicsData.shape;
+    var x = rectData.x;
+    var y = rectData.y;
+    var width = rectData.width;
+    var height = rectData.height;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vertPos = verts.length/6;
+
+        // start
+        verts.push(x, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x , y + height);
+        verts.push(r, g, b, alpha);
+
+        verts.push(x + width, y + height);
+        verts.push(r, g, b, alpha);
+
+        // insert 2 dead triangles..
+        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [x, y,
+                  x + width, y,
+                  x + width, y + height,
+                  x, y + height,
+                  x, y];
+
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a rounded rectangle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
+{
+    var rrectData = graphicsData.shape;
+    var x = rrectData.x;
+    var y = rrectData.y;
+    var width = rrectData.width;
+    var height = rrectData.height;
+
+    var radius = rrectData.radius;
+
+    var recPoints = [];
+    recPoints.push(x, y + radius);
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
+    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        var triangles = utils.PolyK.Triangulate(recPoints);
+
+        //
+
+        var i = 0;
+        for (i = 0; i < triangles.length; i+=3)
+        {
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i] + vecPos);
+            indices.push(triangles[i+1] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+            indices.push(triangles[i+2] + vecPos);
+        }
+
+        for (i = 0; i < recPoints.length; i++)
+        {
+            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
+        }
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = recPoints;
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Calculate the points for a quadratic bezier curve. (helper function..)
+ * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
+ *
+ * @private
+ * @param fromX {number} Origin point x
+ * @param fromY {number} Origin point x
+ * @param cpX {number} Control point x
+ * @param cpY {number} Control point y
+ * @param toX {number} Destination point x
+ * @param toY {number} Destination point y
+ * @return {number[]}
+ */
+GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
+{
+
+    var xa,
+        ya,
+        xb,
+        yb,
+        x,
+        y,
+        n = 20,
+        points = [];
+
+    function getPt(n1 , n2, perc) {
+        var diff = n2 - n1;
+
+        return n1 + ( diff * perc );
+    }
+
+    var j = 0;
+    for (var i = 0; i <= n; i++ ) {
+        j = i / n;
+
+        // The Green Line
+        xa = getPt( fromX , cpX , j );
+        ya = getPt( fromY , cpY , j );
+        xb = getPt( cpX , toX , j );
+        yb = getPt( cpY , toY , j );
+
+        // The Black Dot
+        x = getPt( xa , xb , j );
+        y = getPt( ya , yb , j );
+
+        points.push(x, y);
+    }
+    return points;
+};
+
+/**
+ * Builds a circle to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object to draw
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
+{
+    // need to convert points to a nice regular data
+    var circleData = graphicsData.shape;
+    var x = circleData.x;
+    var y = circleData.y;
+    var width;
+    var height;
+
+    // TODO - bit hacky??
+    if (graphicsData.type === CONST.SHAPES.CIRC)
+    {
+        width = circleData.radius;
+        height = circleData.radius;
+    }
+    else
+    {
+        width = circleData.width;
+        height = circleData.height;
+    }
+
+    var totalSegs = 40;
+    var seg = (Math.PI * 2) / totalSegs ;
+
+    var i = 0;
+
+    if (graphicsData.fill)
+    {
+        var color = utils.hex2rgb(graphicsData.fillColor);
+        var alpha = graphicsData.fillAlpha;
+
+        var r = color[0] * alpha;
+        var g = color[1] * alpha;
+        var b = color[2] * alpha;
+
+        var verts = webGLData.points;
+        var indices = webGLData.indices;
+
+        var vecPos = verts.length/6;
+
+        indices.push(vecPos);
+
+        for (i = 0; i < totalSegs + 1 ; i++)
+        {
+            verts.push(x,y, r, g, b, alpha);
+
+            verts.push(x + Math.sin(seg * i) * width,
+                       y + Math.cos(seg * i) * height,
+                       r, g, b, alpha);
+
+            indices.push(vecPos++, vecPos++);
+        }
+
+        indices.push(vecPos-1);
+    }
+
+    if (graphicsData.lineWidth)
+    {
+        var tempPoints = graphicsData.points;
+
+        graphicsData.points = [];
+
+        for (i = 0; i < totalSegs + 1; i++)
+        {
+            graphicsData.points.push(x + Math.sin(seg * i) * width,
+                                     y + Math.cos(seg * i) * height);
+        }
+
+        this.buildLine(graphicsData, webGLData);
+
+        graphicsData.points = tempPoints;
+    }
+};
+
+/**
+ * Builds a line to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
+{
+    // TODO OPTIMISE!
+    var i = 0;
+    var points = graphicsData.points;
+
+    if (points.length === 0)
+    {
+        return;
+    }
+
+    // if the line width is an odd number add 0.5 to align to a whole pixel
+    if (graphicsData.lineWidth%2)
+    {
+        for (i = 0; i < points.length; i++)
+        {
+            points[i] += 0.5;
+        }
+    }
+
+    // get first and last point.. figure out the middle!
+    var firstPoint = new math.Point(points[0], points[1]);
+    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+    // if the first point is the last point - gonna have issues :)
+    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
+    {
+        // need to clone as we are going to slightly modify the shape..
+        points = points.slice();
+
+        points.pop();
+        points.pop();
+
+        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
+
+        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
+        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
+
+        points.unshift(midPointX, midPointY);
+        points.push(midPointX, midPointY);
+    }
+
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+    var length = points.length / 2;
+    var indexCount = points.length;
+    var indexStart = verts.length/6;
+
+    // DRAW the Line
+    var width = graphicsData.lineWidth / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.lineColor);
+    var alpha = graphicsData.lineAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
+    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
+    var a1, b1, c1, a2, b2, c2;
+    var denom, pdist, dist;
+
+    p1x = points[0];
+    p1y = points[1];
+
+    p2x = points[2];
+    p2y = points[3];
+
+    perpx = -(p1y - p2y);
+    perpy =  p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    // start
+    verts.push(p1x - perpx , p1y - perpy,
+                r, g, b, alpha);
+
+    verts.push(p1x + perpx , p1y + perpy,
+                r, g, b, alpha);
+
+    for (i = 1; i < length-1; i++)
+    {
+        p1x = points[(i-1)*2];
+        p1y = points[(i-1)*2 + 1];
+
+        p2x = points[(i)*2];
+        p2y = points[(i)*2 + 1];
+
+        p3x = points[(i+1)*2];
+        p3y = points[(i+1)*2 + 1];
+
+        perpx = -(p1y - p2y);
+        perpy = p1x - p2x;
+
+        dist = Math.sqrt(perpx*perpx + perpy*perpy);
+        perpx /= dist;
+        perpy /= dist;
+        perpx *= width;
+        perpy *= width;
+
+        perp2x = -(p2y - p3y);
+        perp2y = p2x - p3x;
+
+        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
+        perp2x /= dist;
+        perp2y /= dist;
+        perp2x *= width;
+        perp2y *= width;
+
+        a1 = (-perpy + p1y) - (-perpy + p2y);
+        b1 = (-perpx + p2x) - (-perpx + p1x);
+        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
+        a2 = (-perp2y + p3y) - (-perp2y + p2y);
+        b2 = (-perp2x + p2x) - (-perp2x + p3x);
+        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
+
+        denom = a1*b2 - a2*b1;
+
+        if (Math.abs(denom) < 0.1 )
+        {
+
+            denom+=10.1;
+            verts.push(p2x - perpx , p2y - perpy,
+                r, g, b, alpha);
+
+            verts.push(p2x + perpx , p2y + perpy,
+                r, g, b, alpha);
+
+            continue;
+        }
+
+        px = (b1*c2 - b2*c1)/denom;
+        py = (a2*c1 - a1*c2)/denom;
+
+
+        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
+
+
+        if (pdist > 140 * 140)
+        {
+            perp3x = perpx - perp2x;
+            perp3y = perpy - perp2y;
+
+            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
+            perp3x /= dist;
+            perp3y /= dist;
+            perp3x *= width;
+            perp3y *= width;
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x + perp3x, p2y +perp3y);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - perp3x, p2y -perp3y);
+            verts.push(r, g, b, alpha);
+
+            indexCount++;
+        }
+        else
+        {
+
+            verts.push(px , py);
+            verts.push(r, g, b, alpha);
+
+            verts.push(p2x - (px-p2x), p2y - (py - p2y));
+            verts.push(r, g, b, alpha);
+        }
+    }
+
+    p1x = points[(length-2)*2];
+    p1y = points[(length-2)*2 + 1];
+
+    p2x = points[(length-1)*2];
+    p2y = points[(length-1)*2 + 1];
+
+    perpx = -(p1y - p2y);
+    perpy = p1x - p2x;
+
+    dist = Math.sqrt(perpx*perpx + perpy*perpy);
+    perpx /= dist;
+    perpy /= dist;
+    perpx *= width;
+    perpy *= width;
+
+    verts.push(p2x - perpx , p2y - perpy);
+    verts.push(r, g, b, alpha);
+
+    verts.push(p2x + perpx , p2y + perpy);
+    verts.push(r, g, b, alpha);
+
+    indices.push(indexStart);
+
+    for (i = 0; i < indexCount; i++)
+    {
+        indices.push(indexStart++);
+    }
+
+    indices.push(indexStart-1);
+};
+
+/**
+ * Builds a complex polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
+{
+    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
+    var points = graphicsData.points.slice();
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var indices = webGLData.indices;
+    webGLData.points = points;
+    webGLData.alpha = graphicsData.fillAlpha;
+    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
+
+    // calclate the bounds..
+    var minX = Infinity;
+    var maxX = -Infinity;
+
+    var minY = Infinity;
+    var maxY = -Infinity;
+
+    var x,y;
+
+    // get size..
+    for (var i = 0; i < points.length; i+=2)
+    {
+        x = points[i];
+        y = points[i+1];
+
+        minX = x < minX ? x : minX;
+        maxX = x > maxX ? x : maxX;
+
+        minY = y < minY ? y : minY;
+        maxY = y > maxY ? y : maxY;
+    }
+
+    // add a quad to the end cos there is no point making another buffer!
+    points.push(minX, minY,
+                maxX, minY,
+                maxX, maxY,
+                minX, maxY);
+
+    // push a quad onto the end..
+
+    //TODO - this aint needed!
+    var length = points.length / 2;
+    for (i = 0; i < length; i++)
+    {
+        indices.push( i );
+    }
+
+};
+
+/**
+ * Builds a polygon to draw
+ *
+ * @private
+ * @param graphicsData {Graphics} The graphics object containing all the necessary properties
+ * @param webGLData {object}
+ */
+GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
+{
+    var points = graphicsData.points;
+
+    if (points.length < 6)
+    {
+        return;
+    }
+
+    // get first and last point.. figure out the middle!
+    var verts = webGLData.points;
+    var indices = webGLData.indices;
+
+    var length = points.length / 2;
+
+    // sort color
+    var color = utils.hex2rgb(graphicsData.fillColor);
+    var alpha = graphicsData.fillAlpha;
+    var r = color[0] * alpha;
+    var g = color[1] * alpha;
+    var b = color[2] * alpha;
+
+    var triangles = utils.PolyK.Triangulate(points);
+
+    if (!triangles) {
+        return false;
+    }
+
+    var vertPos = verts.length / 6;
+
+    var i = 0;
+
+    for (i = 0; i < triangles.length; i+=3)
+    {
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i] + vertPos);
+        indices.push(triangles[i+1] + vertPos);
+        indices.push(triangles[i+2] +vertPos);
+        indices.push(triangles[i+2] + vertPos);
+    }
+
+    for (i = 0; i < length; i++)
+    {
+        verts.push(points[i * 2], points[i * 2 + 1],
+                   r, g, b, alpha);
+    }
+
+    return true;
+};
diff --git a/src/core/graphics/webgl/WebGLGraphicsData.js b/src/core/graphics/webgl/WebGLGraphicsData.js
new file mode 100644
index 0000000..41be102
--- /dev/null
+++ b/src/core/graphics/webgl/WebGLGraphicsData.js
@@ -0,0 +1,48 @@
+/**
+ * @class
+ * @private
+ */
+function WebGLGraphicsData(gl) {
+    this.gl = gl;
+
+    //TODO does this need to be split before uploding??
+    this.color = [0,0,0]; // color split!
+    this.points = [];
+    this.indices = [];
+    this.buffer = gl.createBuffer();
+    this.indexBuffer = gl.createBuffer();
+    this.mode = 1;
+    this.alpha = 1;
+    this.dirty = true;
+}
+
+WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
+module.exports = WebGLGraphicsData;
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.reset = function () {
+    this.points = [];
+    this.indices = [];
+};
+
+/**
+ *
+ */
+WebGLGraphicsData.prototype.upload = function () {
+    var gl = this.gl;
+
+//    this.lastIndex = graphics.graphicsData.length;
+    this.glPoints = new Float32Array(this.points);
+
+    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
+    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
+
+    this.glIndicies = new Uint16Array(this.indices);
+
+    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
+    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
+
+    this.dirty = false;
+};
diff --git a/src/core/primitives/Graphics.js b/src/core/primitives/Graphics.js
deleted file mode 100644
index 8db9b45..0000000
--- a/src/core/primitives/Graphics.js
+++ /dev/null
@@ -1,1116 +0,0 @@
-var DisplayObjectContainer = require('../display/DisplayObjectContainer'),
-    //Sprite = require('../display/Sprite'),
-    Texture = require('../textures/Texture'),
-    CanvasBuffer = require('../renderers/canvas/utils/CanvasBuffer'),
-    CanvasGraphics = require('../renderers/canvas/utils/CanvasGraphics'),
-   // WebGLGraphics = require('../renderers/webgl/utils/WebGLGraphics'),
-    GraphicsData = require('./GraphicsData'),
-    math = require('../math'),
-    CONST = require('../const');
-
-/**
- * The Graphics class contains methods used to draw primitive shapes such as lines, circles and
- * rectangles to the display, and color and fill them.
- *
- * @class
- * @extends DisplayObjectContainer
- * @namespace PIXI
- */
-function Graphics()
-{
-    DisplayObjectContainer.call(this);
-
-    this.renderable = true;
-
-    /**
-     * The alpha value used when filling the Graphics object.
-     *
-     * @member {number}
-     * @default 1
-     */
-    this.fillAlpha = 1;
-
-    /**
-     * The width (thickness) of any lines drawn.
-     *
-     * @member {number}
-     * @default 0
-     */
-    this.lineWidth = 0;
-
-    /**
-     * The color of any lines drawn.
-     *
-     * @member {string}
-     * @default 0
-     */
-    this.lineColor = 0;
-
-    /**
-     * Graphics data
-     *
-     * @member {GraphicsData[]}
-     * @private
-     */
-    this.graphicsData = [];
-
-    /**
-     * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint.
-     *
-     * @member {number}
-     * @default 0xFFFFFF
-     */
-    this.tint = 0xFFFFFF;
-
-    /**
-     * The blend mode to be applied to the graphic shape. Apply a value of blendModes.NORMAL to reset the blend mode.
-     *
-     * @member {number}
-     * @default CONST.blendModes.NORMAL;
-     */
-    this.blendMode = CONST.blendModes.NORMAL;
-
-    /**
-     * Current path
-     *
-     * @member {GraphicsData}
-     * @private
-     */
-    this.currentPath = null;
-
-    /**
-     * Array containing some WebGL-related properties used by the WebGL renderer.
-     *
-     * @member {object<number, object>}
-     * @private
-     */
-    // TODO - _webgl should use a prototype object, not a random undocumented object...
-    this._webGL = {};
-
-    /**
-     * Whether this shape is being used as a mask.
-     *
-     * @member {boolean}
-     */
-    this.isMask = false;
-
-    /**
-     * The bounds' padding used for bounds calculation.
-     *
-     * @member {number}
-     */
-    this.boundsPadding = 0;
-
-    /**
-     * A cache of the local bounds to prevent recalculation.
-     *
-     * @member {Rectangle}
-     * @private
-     */
-    this._localBounds = new math.Rectangle(0,0,1,1);
-
-    /**
-     * Used to detect if the graphics object has changed. If this is set to true then the graphics
-     * object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.dirty = true;
-
-    /**
-     * Used to detect if the WebGL graphics object has changed. If this is set to true then the
-     * graphics object will be recalculated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.glDirty = false;
-
-    /**
-     * Used to detect if the cached sprite object needs to be updated.
-     *
-     * @member {boolean}
-     * @private
-     */
-    this.cachedSpriteDirty = false;
-}
-
-// constructor
-Graphics.prototype = Object.create(DisplayObjectContainer.prototype);
-Graphics.prototype.constructor = Graphics;
-module.exports = Graphics;
-
-Object.defineProperties(Graphics.prototype, {
-    /**
-     * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite.
-     * This is useful if your graphics element does not change often, as it will speed up the rendering
-     * of the object in exchange for taking up texture memory. It is also useful if you need the graphics
-     * object to be anti-aliased, because it will be rendered using canvas. This is not recommended if
-     * you are constantly redrawing the graphics element.
-     *
-     * @member {boolean}
-     * @memberof Graphics#
-     * @default false
-     * @private
-     */
-    cacheAsBitmap: {
-        get: function ()
-        {
-            return this._cacheAsBitmap;
-        },
-        set: function (value)
-        {
-            this._cacheAsBitmap = value;
-
-            if (this._cacheAsBitmap)
-            {
-                this._generateCachedSprite();
-            }
-            else
-            {
-                this.destroyCachedSprite();
-                this.dirty = true;
-            }
-        }
-    }
-});
-
-/**
- * Creates a new Graphics object with the same values as this one.
- *
- * @return {Graphics}
- */
-GraphicsData.prototype.clone = function ()
-{
-    var clone = new Graphics();
-
-    clone.renderable    = this.renderable;
-    clone.fillAlpha     = this.fillAlpha;
-    clone.lineWidth     = this.lineWidth;
-    clone.lineColor     = this.lineColor;
-    clone.tint          = this.tint;
-    clone.blendMode     = this.blendMode;
-    clone.isMask        = this.isMask;
-    clone.boundsPadding = this.boundsPadding;
-    clone.dirty         = this.dirty;
-    clone.glDirty       = this.glDirty;
-    clone.cachedSpriteDirty = this.cachedSpriteDirty;
-
-    // copy graphics data
-    for (var i = 0; i < this.graphicsData.length; ++i)
-    {
-        clone.graphicsData.push(this.graphicsData.clone());
-    }
-
-    clone.currentPath = clone.graphicsData[clone.graphicsData.length - 1];
-
-    clone.updateLocalBounds();
-
-    return clone;
-};
-
-/**
- * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method.
- *
- * @param lineWidth {number} width of the line to draw, will update the objects stored style
- * @param color {number} color of the line to draw, will update the objects stored style
- * @param alpha {number} alpha of the line to draw, will update the objects stored style
- * @return {Graphics}
- */
-Graphics.prototype.lineStyle = function (lineWidth, color, alpha)
-{
-    this.lineWidth = lineWidth || 0;
-    this.lineColor = color || 0;
-    this.lineAlpha = (arguments.length < 3) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length)
-        {
-            // halfway through a line? start a new one!
-            this.drawShape( new math.Polygon( this.currentPath.shape.points.slice(-2) ));
-        }
-        else
-        {
-            // otherwise its empty so lets just set the line properties
-            this.currentPath.lineWidth = this.lineWidth;
-            this.currentPath.lineColor = this.lineColor;
-            this.currentPath.lineAlpha = this.lineAlpha;
-        }
-    }
-
-    return this;
-};
-
-/**
- * Moves the current drawing position to x, y.
- *
- * @param x {number} the X coordinate to move to
- * @param y {number} the Y coordinate to move to
- * @return {Graphics}
-  */
-Graphics.prototype.moveTo = function (x, y)
-{
-    this.drawShape(new math.Polygon([x,y]));
-
-    return this;
-};
-
-/**
- * Draws a line using the current line style from the current drawing position to (x, y);
- * The current drawing position is then set to (x, y).
- *
- * @param x {number} the X coordinate to draw to
- * @param y {number} the Y coordinate to draw to
- * @return {Graphics}
- */
-Graphics.prototype.lineTo = function (x, y)
-{
-    this.currentPath.shape.points.push(x, y);
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a quadratic bezier curve and then draws it.
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var xa,
-        ya,
-        n = 20,
-        points = this.currentPath.shape.points;
-
-    if (points.length === 0)
-    {
-        this.moveTo(0, 0);
-    }
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        xa = fromX + ( (cpX - fromX) * j );
-        ya = fromY + ( (cpY - fromY) * j );
-
-        points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ),
-                     ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) );
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Calculate the points for a bezier curve and then draws it.
- *
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param cpX2 {number} Second Control point x
- * @param cpY2 {number} Second Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {Graphics}
- */
-Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points = [0, 0];
-        }
-    }
-    else
-    {
-        this.moveTo(0,0);
-    }
-
-    var n = 20,
-        dt,
-        dt2,
-        dt3,
-        t2,
-        t3,
-        points = this.currentPath.shape.points;
-
-    var fromX = points[points.length-2];
-    var fromY = points[points.length-1];
-
-    var j = 0;
-
-    for (var i = 1; i <= n; ++i)
-    {
-        j = i / n;
-
-        dt = (1 - j);
-        dt2 = dt * dt;
-        dt3 = dt2 * dt;
-
-        t2 = j * j;
-        t3 = t2 * j;
-
-        points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX,
-                     dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arcTo() method creates an arc/curve between two tangents on the canvas.
- *
- * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google!
- *
- * @param x1 {number} The x-coordinate of the beginning of the arc
- * @param y1 {number} The y-coordinate of the beginning of the arc
- * @param x2 {number} The x-coordinate of the end of the arc
- * @param y2 {number} The y-coordinate of the end of the arc
- * @param radius {number} The radius of the arc
- * @return {Graphics}
- */
-Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius)
-{
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length === 0)
-        {
-            this.currentPath.shape.points.push(x1, y1);
-        }
-    }
-    else
-    {
-        this.moveTo(x1, y1);
-    }
-
-    var points = this.currentPath.shape.points,
-        fromX = points[points.length-2],
-        fromY = points[points.length-1],
-        a1 = fromY - y1,
-        b1 = fromX - x1,
-        a2 = y2   - y1,
-        b2 = x2   - x1,
-        mm = Math.abs(a1 * b2 - b1 * a2);
-
-    if (mm < 1.0e-8 || radius === 0)
-    {
-        if (points[points.length-2] !== x1 || points[points.length-1] !== y1)
-        {
-            points.push(x1, y1);
-        }
-    }
-    else
-    {
-        var dd = a1 * a1 + b1 * b1,
-            cc = a2 * a2 + b2 * b2,
-            tt = a1 * a2 + b1 * b2,
-            k1 = radius * Math.sqrt(dd) / mm,
-            k2 = radius * Math.sqrt(cc) / mm,
-            j1 = k1 * tt / dd,
-            j2 = k2 * tt / cc,
-            cx = k1 * b2 + k2 * b1,
-            cy = k1 * a2 + k2 * a1,
-            px = b1 * (k2 + j1),
-            py = a1 * (k2 + j1),
-            qx = b2 * (k1 + j2),
-            qy = a2 * (k1 + j2),
-            startAngle = Math.atan2(py - cy, px - cx),
-            endAngle   = Math.atan2(qy - cy, qx - cx);
-
-        this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * The arc method creates an arc/curve (used to create circles, or parts of circles).
- *
- * @param cx {number} The x-coordinate of the center of the circle
- * @param cy {number} The y-coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @param startAngle {number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
- * @param endAngle {number} The ending angle, in radians
- * @param anticlockwise {boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
- * @return {Graphics}
- */
-Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise)
-{
-    var startX = cx + Math.cos(startAngle) * radius;
-    var startY = cy + Math.sin(startAngle) * radius;
-    var points;
-
-    // TODO - This if-else makes no sense. It uses currentPath in the else where it doesn't exist...
-    if (this.currentPath)
-    {
-        points = this.currentPath.shape.points;
-
-        if (points.length === 0)
-        {
-            points.push(startX, startY);
-        }
-        else if (points[points.length-2] !== startX || points[points.length-1] !== startY)
-        {
-            points.push(startX, startY);
-        }
-    }
-    else
-    {
-        this.moveTo(startX, startY);
-        points = this.currentPath.shape.points;
-    }
-
-    if (startAngle === endAngle)
-    {
-        return this;
-    }
-
-    if (!anticlockwise && endAngle <= startAngle)
-    {
-        endAngle += Math.PI * 2;
-    }
-    else if (anticlockwise && startAngle <= endAngle)
-    {
-        startAngle += Math.PI * 2;
-    }
-
-    var sweep = anticlockwise ? (startAngle - endAngle) *-1 : (endAngle - startAngle);
-    var segs = (Math.abs(sweep)/ (Math.PI * 2)) * 40;
-
-    if (sweep === 0)
-    {
-        return this;
-    }
-
-    var theta = sweep/(segs*2);
-    var theta2 = theta*2;
-
-    var cTheta = Math.cos(theta);
-    var sTheta = Math.sin(theta);
-
-    var segMinus = segs - 1;
-
-    var remainder = ( segMinus % 1 ) / segMinus;
-
-    for (var i = 0; i <= segMinus; ++i)
-    {
-        var real =  i + remainder * i;
-        var angle = ((theta) + startAngle + (theta2 * real));
-
-        var c = Math.cos(angle);
-        var s = -Math.sin(angle);
-
-        points.push(( (cTheta *  c) + (sTheta * s) ) * radius + cx,
-                    ( (cTheta * -s) + (sTheta * c) ) * radius + cy);
-    }
-
-    this.dirty = true;
-
-    return this;
-};
-
-/**
- * Specifies a simple one-color fill that subsequent calls to other Graphics methods
- * (such as lineTo() or drawCircle()) use when drawing.
- *
- * @param color {number} the color of the fill
- * @param alpha {number} the alpha of the fill
- * @return {Graphics}
- */
-Graphics.prototype.beginFill = function (color, alpha)
-{
-    this.filling = true;
-    this.fillColor = color || 0;
-    this.fillAlpha = (alpha === undefined) ? 1 : alpha;
-
-    if (this.currentPath)
-    {
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.currentPath.fill = this.filling;
-            this.currentPath.fillColor = this.fillColor;
-            this.currentPath.fillAlpha = this.fillAlpha;
-        }
-    }
-    return this;
-};
-
-/**
- * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method.
- *
- * @return {Graphics}
- */
-Graphics.prototype.endFill = function ()
-{
-    this.filling = false;
-    this.fillColor = null;
-    this.fillAlpha = 1;
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @return {Graphics}
- */
-Graphics.prototype.drawRect = function ( x, y, width, height )
-{
-    this.drawShape(new math.Rectangle(x,y, width, height));
-
-    return this;
-};
-
-/**
- *
- * @param x {number} The X coord of the top-left of the rectangle
- * @param y {number} The Y coord of the top-left of the rectangle
- * @param width {number} The width of the rectangle
- * @param height {number} The height of the rectangle
- * @param radius {number} Radius of the rectangle corners
- */
-Graphics.prototype.drawRoundedRect = function ( x, y, width, height, radius )
-{
-    this.drawShape(new math.RoundedRectangle(x, y, width, height, radius));
-
-    return this;
-};
-
-/**
- * Draws a circle.
- *
- * @param x {number} The X coordinate of the center of the circle
- * @param y {number} The Y coordinate of the center of the circle
- * @param radius {number} The radius of the circle
- * @return {Graphics}
- */
-Graphics.prototype.drawCircle = function (x, y, radius)
-{
-    this.drawShape(new math.Circle(x,y, radius));
-
-    return this;
-};
-
-/**
- * Draws an ellipse.
- *
- * @param x {number} The X coordinate of the center of the ellipse
- * @param y {number} The Y coordinate of the center of the ellipse
- * @param width {number} The half width of the ellipse
- * @param height {number} The half height of the ellipse
- * @return {Graphics}
- */
-Graphics.prototype.drawEllipse = function (x, y, width, height)
-{
-    this.drawShape(new math.Ellipse(x, y, width, height));
-
-    return this;
-};
-
-/**
- * Draws a polygon using the given path.
- *
- * @param path {Array} The path data used to construct the polygon.
- * @return {Graphics}
- */
-Graphics.prototype.drawPolygon = function (path)
-{
-    if (!(path instanceof Array))
-    {
-        path = Array.prototype.slice.call(arguments);
-    }
-
-    this.drawShape(new math.Polygon(path));
-
-    return this;
-};
-
-/**
- * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings.
- *
- * @return {Graphics}
- */
-Graphics.prototype.clear = function ()
-{
-    this.lineWidth = 0;
-    this.filling = false;
-
-    this.dirty = true;
-    this.clearDirty = true;
-    this.graphicsData = [];
-
-    return this;
-};
-
-/**
- * Useful function that returns a texture of the graphics object that can then be used to create sprites
- * This can be quite useful if your geometry is complicated and needs to be reused multiple times.
- *
- * @param resolution {number} The resolution of the texture being generated
- * @param scaleMode {number} Should be one of the scaleMode consts
- * @return {Texture} a texture of the graphics object
- */
-Graphics.prototype.generateTexture = function (resolution, scaleMode)
-{
-    resolution = resolution || 1;
-
-    var bounds = this.getBounds();
-
-    var canvasBuffer = new CanvasBuffer(bounds.width * resolution, bounds.height * resolution);
-
-    var texture = Texture.fromCanvas(canvasBuffer.canvas, scaleMode);
-    texture.baseTexture.resolution = resolution;
-
-    canvasBuffer.context.scale(resolution, resolution);
-
-    canvasBuffer.context.translate(-bounds.x,-bounds.y);
-
-    CanvasGraphics.renderGraphics(this, canvasBuffer.context);
-
-    return texture;
-};
-
-/**
- * Renders the object using the WebGL renderer
- *
- * @param renderer {WebGLRenderer}
- */
-Graphics.prototype._renderWebGL = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (this.isMask === true)
-    {
-        return;
-    }
-
-    // this code may still be needed so leaving for now..
-    //
-    /*
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture on the gpu too!
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.worldAlpha = this.worldAlpha;
-
-        Sprite.prototype.renderWebGL.call(this._cachedSprite, renderer);
-
-        return;
-    }
-
-    */
-
-    if (this.glDirty)
-    {
-        this.dirty = true;
-        this.glDirty = false;
-    }
-
-    renderer.setObjectRenderer(renderer.objectRenderers.graphics);
-    renderer.objectRenderers.graphics.render(this);
-
-};
-
-/**
- * Renders the object using the Canvas renderer
- *
- * @param renderer {CanvasRenderer}
- * @private
- */
-Graphics.prototype.renderCanvas = function (renderer)
-{
-    // if the sprite is not visible or the alpha is 0 then no need to render this element
-    if (!this.visible || this.alpha <= 0 || this.isMask === true)
-    {
-        return;
-    }
-
-    if (this._cacheAsBitmap)
-    {
-        if (this.dirty || this.cachedSpriteDirty)
-        {
-            this._generateCachedSprite();
-
-            // we will also need to update the texture
-            this.updateCachedSpriteTexture();
-
-            this.cachedSpriteDirty = false;
-            this.dirty = false;
-        }
-
-        this._cachedSprite.alpha = this.alpha;
-
-        Sprite.prototype.renderCanvas.call(this._cachedSprite, renderer);
-
-        return;
-    }
-    else
-    {
-        var context = renderer.context;
-        var transform = this.worldTransform;
-
-        if (this.blendMode !== renderer.currentBlendMode)
-        {
-            renderer.currentBlendMode = this.blendMode;
-            context.globalCompositeOperation = renderer.blendModes[renderer.currentBlendMode];
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.pushMask(this._mask, renderer);
-        }
-
-        var resolution = renderer.resolution;
-        context.setTransform(
-            transform.a * resolution,
-            transform.b * resolution,
-            transform.c * resolution,
-            transform.d * resolution,
-            transform.tx * resolution,
-            transform.ty * resolution
-        );
-
-        CanvasGraphics.renderGraphics(this, context);
-
-        for (var i = 0, j = this.children.length; i < j; ++i)
-        {
-            this.children[i].renderCanvas(renderer);
-        }
-
-        if (this._mask)
-        {
-            renderer.maskManager.popMask(renderer);
-        }
-    }
-};
-
-/**
- * Retrieves the bounds of the graphic shape as a rectangle object
- *
- * @return {Rectangle} the rectangular bounding area
- */
-Graphics.prototype.getBounds = function (matrix)
-{
-    // return an empty object if the item is a mask!
-    if (this.isMask)
-    {
-        return math.Rectangle.EMPTY;
-    }
-
-    if (this.dirty)
-    {
-        this.updateLocalBounds();
-
-        this.glDirty = true;
-        this.cachedSpriteDirty = true;
-        this.dirty = false;
-    }
-
-    var bounds = this._localBounds;
-
-    var w0 = bounds.x;
-    var w1 = bounds.width + bounds.x;
-
-    var h0 = bounds.y;
-    var h1 = bounds.height + bounds.y;
-
-    var worldTransform = matrix || this.worldTransform;
-
-    var a = worldTransform.a;
-    var b = worldTransform.b;
-    var c = worldTransform.c;
-    var d = worldTransform.d;
-    var tx = worldTransform.tx;
-    var ty = worldTransform.ty;
-
-    var x1 = a * w1 + c * h1 + tx;
-    var y1 = d * h1 + b * w1 + ty;
-
-    var x2 = a * w0 + c * h1 + tx;
-    var y2 = d * h1 + b * w0 + ty;
-
-    var x3 = a * w0 + c * h0 + tx;
-    var y3 = d * h0 + b * w0 + ty;
-
-    var x4 =  a * w1 + c * h0 + tx;
-    var y4 =  d * h0 + b * w1 + ty;
-
-    var maxX = x1;
-    var maxY = y1;
-
-    var minX = x1;
-    var minY = y1;
-
-    minX = x2 < minX ? x2 : minX;
-    minX = x3 < minX ? x3 : minX;
-    minX = x4 < minX ? x4 : minX;
-
-    minY = y2 < minY ? y2 : minY;
-    minY = y3 < minY ? y3 : minY;
-    minY = y4 < minY ? y4 : minY;
-
-    maxX = x2 > maxX ? x2 : maxX;
-    maxX = x3 > maxX ? x3 : maxX;
-    maxX = x4 > maxX ? x4 : maxX;
-
-    maxY = y2 > maxY ? y2 : maxY;
-    maxY = y3 > maxY ? y3 : maxY;
-    maxY = y4 > maxY ? y4 : maxY;
-
-    this._bounds.x = minX;
-    this._bounds.width = maxX - minX;
-
-    this._bounds.y = minY;
-    this._bounds.height = maxY - minY;
-
-    return this._bounds;
-};
-
-/**
- * Update the bounds of the object
- *
- */
-Graphics.prototype.updateLocalBounds = function ()
-{
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    if (this.graphicsData.length)
-    {
-        var shape, points, x, y, w, h;
-
-        for (var i = 0; i < this.graphicsData.length; i++)
-        {
-            var data = this.graphicsData[i];
-            var type = data.type;
-            var lineWidth = data.lineWidth;
-            shape = data.shape;
-
-            if (type === CONST.SHAPES.RECT || type === CONST.SHAPES.RREC)
-            {
-                x = shape.x - lineWidth/2;
-                y = shape.y - lineWidth/2;
-                w = shape.width + lineWidth;
-                h = shape.height + lineWidth;
-
-                minX = x < minX ? x : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y < minY ? y : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.CIRC)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.radius + lineWidth/2;
-                h = shape.radius + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else if (type === CONST.SHAPES.ELIP)
-            {
-                x = shape.x;
-                y = shape.y;
-                w = shape.width + lineWidth/2;
-                h = shape.height + lineWidth/2;
-
-                minX = x - w < minX ? x - w : minX;
-                maxX = x + w > maxX ? x + w : maxX;
-
-                minY = y - h < minY ? y - h : minY;
-                maxY = y + h > maxY ? y + h : maxY;
-            }
-            else
-            {
-                // POLY
-                points = shape.points;
-
-                for (var j = 0; j < points.length; j += 2)
-                {
-                    x = points[j];
-                    y = points[j+1];
-
-                    minX = x-lineWidth < minX ? x-lineWidth : minX;
-                    maxX = x+lineWidth > maxX ? x+lineWidth : maxX;
-
-                    minY = y-lineWidth < minY ? y-lineWidth : minY;
-                    maxY = y+lineWidth > maxY ? y+lineWidth : maxY;
-                }
-            }
-        }
-    }
-    else
-    {
-        minX = 0;
-        maxX = 0;
-        minY = 0;
-        maxY = 0;
-    }
-
-    var padding = this.boundsPadding;
-
-    this._localBounds.x = minX - padding;
-    this._localBounds.width = (maxX - minX) + padding * 2;
-
-    this._localBounds.y = minY - padding;
-    this._localBounds.height = (maxY - minY) + padding * 2;
-};
-
-/**
- * Generates the cached sprite when the sprite has cacheAsBitmap = true
- *
- * @private
- */
-Graphics.prototype._generateCachedSprite = function ()
-{
-    var bounds = this.getLocalBounds();
-
-    if (!this._cachedSprite)
-    {
-        var canvasBuffer = new CanvasBuffer(bounds.width, bounds.height);
-        var texture = Texture.fromCanvas(canvasBuffer.canvas);
-
-        this._cachedSprite = new Sprite(texture);
-        this._cachedSprite.buffer = canvasBuffer;
-
-        this._cachedSprite.worldTransform = this.worldTransform;
-    }
-    else
-    {
-        this._cachedSprite.buffer.resize(bounds.width, bounds.height);
-    }
-
-    // leverage the anchor to account for the offset of the element
-    this._cachedSprite.anchor.x = -( bounds.x / bounds.width );
-    this._cachedSprite.anchor.y = -( bounds.y / bounds.height );
-
-    // this._cachedSprite.buffer.context.save();
-    this._cachedSprite.buffer.context.translate(-bounds.x,-bounds.y);
-
-    // make sure we set the alpha of the graphics to 1 for the render..
-    this.worldAlpha = 1;
-
-    // now render the graphic..
-    CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context);
-
-    this._cachedSprite.alpha = this.alpha;
-};
-
-/**
- * Updates texture size based on canvas size
- *
- * @private
- */
-Graphics.prototype.updateCachedSpriteTexture = function ()
-{
-    var cachedSprite = this._cachedSprite;
-    var texture = cachedSprite.texture;
-    var canvas = cachedSprite.buffer.canvas;
-
-    texture.baseTexture.width = canvas.width;
-    texture.baseTexture.height = canvas.height;
-    texture.crop.width = texture.frame.width = canvas.width;
-    texture.crop.height = texture.frame.height = canvas.height;
-
-    cachedSprite._width = canvas.width;
-    cachedSprite._height = canvas.height;
-
-    // update the dirty base textures
-    texture.baseTexture.dirty();
-};
-
-/**
- * Destroys a previous cached sprite.
- *
- */
-Graphics.prototype.destroyCachedSprite = function ()
-{
-    this._cachedSprite.texture.destroy(true);
-
-    // let the gc collect the unused sprite
-    // TODO could be object pooled!
-    this._cachedSprite = null;
-};
-
-/**
- * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon.
- *
- * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw.
- * @return {GraphicsData} The generated GraphicsData object.
- */
-Graphics.prototype.drawShape = function (shape)
-{
-    if (this.currentPath)
-    {
-        // check current path!
-        if (this.currentPath.shape.points.length <= 2)
-        {
-            this.graphicsData.pop();
-        }
-    }
-
-    this.currentPath = null;
-
-    var data = new GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape);
-
-    this.graphicsData.push(data);
-
-    if (data.type === CONST.SHAPES.POLY)
-    {
-        data.shape.closed = this.filling;
-        this.currentPath = data;
-    }
-
-    this.dirty = true;
-
-    return data;
-};
diff --git a/src/core/primitives/GraphicsData.js b/src/core/primitives/GraphicsData.js
deleted file mode 100644
index 788f6f2..0000000
--- a/src/core/primitives/GraphicsData.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * A GraphicsData object.
- *
- * @class
- * @namespace PIXI
- */
-function GraphicsData(lineWidth, lineColor, lineAlpha, fillColor, fillAlpha, fill, shape)
-{
-    this.lineWidth = lineWidth;
-    this.lineColor = lineColor;
-    this.lineAlpha = lineAlpha;
-    this._lineTint = lineColor;
-
-    this.fillColor = fillColor;
-    this.fillAlpha = fillAlpha;
-    this._fillTint = fillColor;
-    this.fill = fill;
-
-    this.shape = shape;
-    this.type = shape.type;
-}
-
-GraphicsData.prototype.constructor = GraphicsData;
-module.exports = GraphicsData;
-
-/**
- * Creates a new GraphicsData object with the same values as this one.
- *
- * @return {GraphicsData}
- */
-GraphicsData.prototype.clone = function ()
-{
-    return new GraphicsData(
-        this.lineWidth,
-        this.lineColor,
-        this.lineAlpha,
-        this.fillColor,
-        this.fillAlpha,
-        this.fill,
-        this.shape
-    );
-};
diff --git a/src/core/primitives/webgl/GraphicsRenderer.js b/src/core/primitives/webgl/GraphicsRenderer.js
deleted file mode 100644
index b3010bd..0000000
--- a/src/core/primitives/webgl/GraphicsRenderer.js
+++ /dev/null
@@ -1,876 +0,0 @@
-var utils = require('../utils'),
-    math = require('../math'),
-    CONST = require('../const'),
-    ObjectRenderer = require('../renderers/webgl/utils/ObjectRenderer'),
-    WebGLRenderer = require('../renderers/webgl/WebGLRenderer'),
-    WebGLGraphicsData = require('./WebGLGraphicsData');
-
-/**
- * Renders the graphics object.
- *
- * @class
- * @private
- * @namespace PIXI
- * @param renderer {WebGLRenderer} The renderer this object renderer works for.
- */
-function GraphicsRenderer(renderer)
-{
-    ObjectRenderer.call(this, renderer);
-
-    this.graphicsDataPool = [];
-}
-
-GraphicsRenderer.prototype = Object.create(ObjectRenderer.prototype);
-GraphicsRenderer.prototype.constructor = GraphicsRenderer;
-module.exports = GraphicsRenderer;
-
-WebGLRenderer.registerObjectRenderer('graphics', GraphicsRenderer);
-
-/**
- * Destroys this renderer.
- *
- */
-GraphicsRenderer.prototype.destroy = function () {
-    ObjectRenderer.prototype.destroy.call(this);
-
-    this.graphicsDataPool = null;
-};
-
-/**
- * Renders a graphics object.
- *
- * @param graphics {Graphics} The graphics object to render.
- */
-GraphicsRenderer.prototype.render = function(graphics)
-{
-    var renderer = this.renderer;
-    var gl = renderer.gl;
-
-    var projection = renderer.projection,
-        offset = renderer.offset,
-        shader = renderer.shaderManager.primitiveShader,
-        webGLData;
-
-    if (graphics.dirty)
-    {
-        this.updateGraphics(graphics, gl);
-    }
-
-    var webGL = graphics._webGL[gl.id];
-
-    // This  could be speeded up for sure!
-
-    renderer.blendModeManager.setBlendMode( graphics.blendMode );
-
-//    var matrix =  graphics.worldTransform.clone();
-//    var matrix =  renderer.currentRenderTarget.projectionMatrix.clone();
-//    matrix.append(graphics.worldTransform);
-
-    for (var i = 0; i < webGL.data.length; i++)
-    {
-        if (webGL.data[i].mode === 1)
-        {
-            webGLData = webGL.data[i];
-
-            renderer.maskManager.pushStencil(graphics, webGLData, renderer);
-
-            // render quad..
-            gl.drawElements(gl.TRIANGLE_FAN, 4, gl.UNSIGNED_SHORT, ( webGLData.indices.length - 4 ) * 2 );
-
-            renderer.maskManager.popStencil(graphics, webGLData, renderer);
-        }
-        else
-        {
-            webGLData = webGL.data[i];
-
-
-            renderer.shaderManager.setShader( shader );//activatePrimitiveShader();
-            shader = renderer.shaderManager.primitiveShader;
-
-            gl.uniformMatrix3fv(shader.uniforms.translationMatrix._location, false, graphics.worldTransform.toArray(true));
-
-            gl.uniformMatrix3fv(shader.uniforms.projectionMatrix._location, false, renderer.currentRenderTarget.projectionMatrix.toArray(true));
-
-            gl.uniform3fv(shader.uniforms.tint._location, utils.hex2rgb(graphics.tint));
-
-            gl.uniform1f(shader.uniforms.alpha._location, graphics.worldAlpha);
-
-
-            gl.bindBuffer(gl.ARRAY_BUFFER, webGLData.buffer);
-
-            gl.vertexAttribPointer(shader.attributes.aVertexPosition, 2, gl.FLOAT, false, 4 * 6, 0);
-            gl.vertexAttribPointer(shader.attributes.aColor, 4, gl.FLOAT, false,4 * 6, 2 * 4);
-
-            // set the index buffer!
-            gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, webGLData.indexBuffer);
-            gl.drawElements(gl.TRIANGLE_STRIP,  webGLData.indices.length, gl.UNSIGNED_SHORT, 0 );
-        }
-    }
-};
-
-/**
- * Updates the graphics object
- *
- * @private
- * @param graphicsData {Graphics} The graphics object to update
- * @param gl {WebGLContext} the current WebGL drawing context
- */
-GraphicsRenderer.prototype.updateGraphics = function(graphics)
-{
-    var gl = this.renderer.gl;
-
-     // get the contexts graphics object
-    var webGL = graphics._webGL[gl.id];
-
-    // if the graphics object does not exist in the webGL context time to create it!
-    if (!webGL)
-    {
-        webGL = graphics._webGL[gl.id] = {lastIndex:0, data:[], gl:gl};
-    }
-
-    // flag the graphics as not dirty as we are about to update it...
-    graphics.dirty = false;
-
-    var i;
-
-    // if the user cleared the graphics object we will need to clear every object
-    if (graphics.clearDirty)
-    {
-        graphics.clearDirty = false;
-
-        // lop through and return all the webGLDatas to the object pool so than can be reused later on
-        for (i = 0; i < webGL.data.length; i++)
-        {
-            var graphicsData = webGL.data[i];
-            graphicsData.reset();
-            this.graphicsDataPool.push( graphicsData );
-        }
-
-        // clear the array and reset the index..
-        webGL.data = [];
-        webGL.lastIndex = 0;
-    }
-
-    var webGLData;
-
-    // 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
-    // other wise graphics objects will be pushed into a batch..
-    for (i = webGL.lastIndex; i < graphics.graphicsData.length; i++)
-    {
-        var data = graphics.graphicsData[i];
-
-        if (data.type === CONST.SHAPES.POLY)
-        {
-            // need to add the points the the graphics object..
-            data.points = data.shape.points.slice();
-            if (data.shape.closed)
-            {
-                // close the poly if the value is true!
-                if (data.points[0] !== data.points[data.points.length-2] || data.points[1] !== data.points[data.points.length-1])
-                {
-                    data.points.push(data.points[0], data.points[1]);
-                }
-            }
-
-            // MAKE SURE WE HAVE THE CORRECT TYPE..
-            if (data.fill)
-            {
-                if (data.points.length >= 6)
-                {
-                    if (data.points.length < 6 * 2)
-                    {
-                        webGLData = this.switchMode(webGL, 0);
-
-                        var canDrawUsingSimple = this.buildPoly(data, webGLData);
-                   //     console.log(canDrawUsingSimple);
-
-                        if (!canDrawUsingSimple)
-                        {
-                        //    console.log("<>>>")
-                            webGLData = this.switchMode(webGL, 1);
-                            this.buildComplexPoly(data, webGLData);
-                        }
-
-                    }
-                    else
-                    {
-                        webGLData = this.switchMode(webGL, 1);
-                        this.buildComplexPoly(data, webGLData);
-                    }
-                }
-            }
-
-            if (data.lineWidth > 0)
-            {
-                webGLData = this.switchMode(webGL, 0);
-                this.buildLine(data, webGLData);
-            }
-        }
-        else
-        {
-            webGLData = this.switchMode(webGL, 0);
-
-            if (data.type === CONST.SHAPES.RECT)
-            {
-                this.buildRectangle(data, webGLData);
-            }
-            else if (data.type === CONST.SHAPES.CIRC || data.type === CONST.SHAPES.ELIP)
-            {
-                this.buildCircle(data, webGLData);
-            }
-            else if (data.type === CONST.SHAPES.RREC)
-            {
-                this.buildRoundedRectangle(data, webGLData);
-            }
-        }
-
-        webGL.lastIndex++;
-    }
-
-    // upload all the dirty data...
-    for (i = 0; i < webGL.data.length; i++)
-    {
-        webGLData = webGL.data[i];
-
-        if (webGLData.dirty)
-        {
-            webGLData.upload();
-        }
-    }
-};
-
-/**
- *
- *
- * @private
- * @param webGL {WebGLContext}
- * @param type {number}
- */
-GraphicsRenderer.prototype.switchMode = function (webGL, type)
-{
-    var webGLData;
-
-    if (!webGL.data.length)
-    {
-        webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
-        webGLData.mode = type;
-        webGL.data.push(webGLData);
-    }
-    else
-    {
-        webGLData = webGL.data[webGL.data.length-1];
-
-        if (webGLData.mode !== type || type === 1)
-        {
-            webGLData = this.graphicsDataPool.pop() || new WebGLGraphicsData(webGL.gl);
-            webGLData.mode = type;
-            webGL.data.push(webGLData);
-        }
-    }
-
-    webGLData.dirty = true;
-
-    return webGLData;
-};
-
-/**
- * Builds a rectangle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildRectangle = function (graphicsData, webGLData)
-{
-    // --- //
-    // need to convert points to a nice regular data
-    //
-    var rectData = graphicsData.shape;
-    var x = rectData.x;
-    var y = rectData.y;
-    var width = rectData.width;
-    var height = rectData.height;
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vertPos = verts.length/6;
-
-        // start
-        verts.push(x, y);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x + width, y);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x , y + height);
-        verts.push(r, g, b, alpha);
-
-        verts.push(x + width, y + height);
-        verts.push(r, g, b, alpha);
-
-        // insert 2 dead triangles..
-        indices.push(vertPos, vertPos, vertPos+1, vertPos+2, vertPos+3, vertPos+3);
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = [x, y,
-                  x + width, y,
-                  x + width, y + height,
-                  x, y + height,
-                  x, y];
-
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Builds a rounded rectangle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildRoundedRectangle = function (graphicsData, webGLData)
-{
-    var rrectData = graphicsData.shape;
-    var x = rrectData.x;
-    var y = rrectData.y;
-    var width = rrectData.width;
-    var height = rrectData.height;
-
-    var radius = rrectData.radius;
-
-    var recPoints = [];
-    recPoints.push(x, y + radius);
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x, y + height - radius, x, y + height, x + radius, y + height));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width - radius, y + height, x + width, y + height, x + width, y + height - radius));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + width, y + radius, x + width, y, x + width - radius, y));
-    recPoints = recPoints.concat(this.quadraticBezierCurve(x + radius, y, x, y, x, y + radius));
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vecPos = verts.length/6;
-
-        var triangles = utils.PolyK.Triangulate(recPoints);
-
-        //
-
-        var i = 0;
-        for (i = 0; i < triangles.length; i+=3)
-        {
-            indices.push(triangles[i] + vecPos);
-            indices.push(triangles[i] + vecPos);
-            indices.push(triangles[i+1] + vecPos);
-            indices.push(triangles[i+2] + vecPos);
-            indices.push(triangles[i+2] + vecPos);
-        }
-
-        for (i = 0; i < recPoints.length; i++)
-        {
-            verts.push(recPoints[i], recPoints[++i], r, g, b, alpha);
-        }
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = recPoints;
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Calculate the points for a quadratic bezier curve. (helper function..)
- * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c
- *
- * @private
- * @param fromX {number} Origin point x
- * @param fromY {number} Origin point x
- * @param cpX {number} Control point x
- * @param cpY {number} Control point y
- * @param toX {number} Destination point x
- * @param toY {number} Destination point y
- * @return {number[]}
- */
-GraphicsRenderer.prototype.quadraticBezierCurve = function (fromX, fromY, cpX, cpY, toX, toY)
-{
-
-    var xa,
-        ya,
-        xb,
-        yb,
-        x,
-        y,
-        n = 20,
-        points = [];
-
-    function getPt(n1 , n2, perc) {
-        var diff = n2 - n1;
-
-        return n1 + ( diff * perc );
-    }
-
-    var j = 0;
-    for (var i = 0; i <= n; i++ ) {
-        j = i / n;
-
-        // The Green Line
-        xa = getPt( fromX , cpX , j );
-        ya = getPt( fromY , cpY , j );
-        xb = getPt( cpX , toX , j );
-        yb = getPt( cpY , toY , j );
-
-        // The Black Dot
-        x = getPt( xa , xb , j );
-        y = getPt( ya , yb , j );
-
-        points.push(x, y);
-    }
-    return points;
-};
-
-/**
- * Builds a circle to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object to draw
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildCircle = function (graphicsData, webGLData)
-{
-    // need to convert points to a nice regular data
-    var circleData = graphicsData.shape;
-    var x = circleData.x;
-    var y = circleData.y;
-    var width;
-    var height;
-
-    // TODO - bit hacky??
-    if (graphicsData.type === CONST.SHAPES.CIRC)
-    {
-        width = circleData.radius;
-        height = circleData.radius;
-    }
-    else
-    {
-        width = circleData.width;
-        height = circleData.height;
-    }
-
-    var totalSegs = 40;
-    var seg = (Math.PI * 2) / totalSegs ;
-
-    var i = 0;
-
-    if (graphicsData.fill)
-    {
-        var color = utils.hex2rgb(graphicsData.fillColor);
-        var alpha = graphicsData.fillAlpha;
-
-        var r = color[0] * alpha;
-        var g = color[1] * alpha;
-        var b = color[2] * alpha;
-
-        var verts = webGLData.points;
-        var indices = webGLData.indices;
-
-        var vecPos = verts.length/6;
-
-        indices.push(vecPos);
-
-        for (i = 0; i < totalSegs + 1 ; i++)
-        {
-            verts.push(x,y, r, g, b, alpha);
-
-            verts.push(x + Math.sin(seg * i) * width,
-                       y + Math.cos(seg * i) * height,
-                       r, g, b, alpha);
-
-            indices.push(vecPos++, vecPos++);
-        }
-
-        indices.push(vecPos-1);
-    }
-
-    if (graphicsData.lineWidth)
-    {
-        var tempPoints = graphicsData.points;
-
-        graphicsData.points = [];
-
-        for (i = 0; i < totalSegs + 1; i++)
-        {
-            graphicsData.points.push(x + Math.sin(seg * i) * width,
-                                     y + Math.cos(seg * i) * height);
-        }
-
-        this.buildLine(graphicsData, webGLData);
-
-        graphicsData.points = tempPoints;
-    }
-};
-
-/**
- * Builds a line to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildLine = function (graphicsData, webGLData)
-{
-    // TODO OPTIMISE!
-    var i = 0;
-    var points = graphicsData.points;
-
-    if (points.length === 0)
-    {
-        return;
-    }
-
-    // if the line width is an odd number add 0.5 to align to a whole pixel
-    if (graphicsData.lineWidth%2)
-    {
-        for (i = 0; i < points.length; i++)
-        {
-            points[i] += 0.5;
-        }
-    }
-
-    // get first and last point.. figure out the middle!
-    var firstPoint = new math.Point(points[0], points[1]);
-    var lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
-
-    // if the first point is the last point - gonna have issues :)
-    if (firstPoint.x === lastPoint.x && firstPoint.y === lastPoint.y)
-    {
-        // need to clone as we are going to slightly modify the shape..
-        points = points.slice();
-
-        points.pop();
-        points.pop();
-
-        lastPoint = new math.Point(points[points.length - 2], points[points.length - 1]);
-
-        var midPointX = lastPoint.x + (firstPoint.x - lastPoint.x) *0.5;
-        var midPointY = lastPoint.y + (firstPoint.y - lastPoint.y) *0.5;
-
-        points.unshift(midPointX, midPointY);
-        points.push(midPointX, midPointY);
-    }
-
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-    var length = points.length / 2;
-    var indexCount = points.length;
-    var indexStart = verts.length/6;
-
-    // DRAW the Line
-    var width = graphicsData.lineWidth / 2;
-
-    // sort color
-    var color = utils.hex2rgb(graphicsData.lineColor);
-    var alpha = graphicsData.lineAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
-
-    var px, py, p1x, p1y, p2x, p2y, p3x, p3y;
-    var perpx, perpy, perp2x, perp2y, perp3x, perp3y;
-    var a1, b1, c1, a2, b2, c2;
-    var denom, pdist, dist;
-
-    p1x = points[0];
-    p1y = points[1];
-
-    p2x = points[2];
-    p2y = points[3];
-
-    perpx = -(p1y - p2y);
-    perpy =  p1x - p2x;
-
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
-
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
-
-    // start
-    verts.push(p1x - perpx , p1y - perpy,
-                r, g, b, alpha);
-
-    verts.push(p1x + perpx , p1y + perpy,
-                r, g, b, alpha);
-
-    for (i = 1; i < length-1; i++)
-    {
-        p1x = points[(i-1)*2];
-        p1y = points[(i-1)*2 + 1];
-
-        p2x = points[(i)*2];
-        p2y = points[(i)*2 + 1];
-
-        p3x = points[(i+1)*2];
-        p3y = points[(i+1)*2 + 1];
-
-        perpx = -(p1y - p2y);
-        perpy = p1x - p2x;
-
-        dist = Math.sqrt(perpx*perpx + perpy*perpy);
-        perpx /= dist;
-        perpy /= dist;
-        perpx *= width;
-        perpy *= width;
-
-        perp2x = -(p2y - p3y);
-        perp2y = p2x - p3x;
-
-        dist = Math.sqrt(perp2x*perp2x + perp2y*perp2y);
-        perp2x /= dist;
-        perp2y /= dist;
-        perp2x *= width;
-        perp2y *= width;
-
-        a1 = (-perpy + p1y) - (-perpy + p2y);
-        b1 = (-perpx + p2x) - (-perpx + p1x);
-        c1 = (-perpx + p1x) * (-perpy + p2y) - (-perpx + p2x) * (-perpy + p1y);
-        a2 = (-perp2y + p3y) - (-perp2y + p2y);
-        b2 = (-perp2x + p2x) - (-perp2x + p3x);
-        c2 = (-perp2x + p3x) * (-perp2y + p2y) - (-perp2x + p2x) * (-perp2y + p3y);
-
-        denom = a1*b2 - a2*b1;
-
-        if (Math.abs(denom) < 0.1 )
-        {
-
-            denom+=10.1;
-            verts.push(p2x - perpx , p2y - perpy,
-                r, g, b, alpha);
-
-            verts.push(p2x + perpx , p2y + perpy,
-                r, g, b, alpha);
-
-            continue;
-        }
-
-        px = (b1*c2 - b2*c1)/denom;
-        py = (a2*c1 - a1*c2)/denom;
-
-
-        pdist = (px -p2x) * (px -p2x) + (py -p2y) + (py -p2y);
-
-
-        if (pdist > 140 * 140)
-        {
-            perp3x = perpx - perp2x;
-            perp3y = perpy - perp2y;
-
-            dist = Math.sqrt(perp3x*perp3x + perp3y*perp3y);
-            perp3x /= dist;
-            perp3y /= dist;
-            perp3x *= width;
-            perp3y *= width;
-
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x + perp3x, p2y +perp3y);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x - perp3x, p2y -perp3y);
-            verts.push(r, g, b, alpha);
-
-            indexCount++;
-        }
-        else
-        {
-
-            verts.push(px , py);
-            verts.push(r, g, b, alpha);
-
-            verts.push(p2x - (px-p2x), p2y - (py - p2y));
-            verts.push(r, g, b, alpha);
-        }
-    }
-
-    p1x = points[(length-2)*2];
-    p1y = points[(length-2)*2 + 1];
-
-    p2x = points[(length-1)*2];
-    p2y = points[(length-1)*2 + 1];
-
-    perpx = -(p1y - p2y);
-    perpy = p1x - p2x;
-
-    dist = Math.sqrt(perpx*perpx + perpy*perpy);
-    perpx /= dist;
-    perpy /= dist;
-    perpx *= width;
-    perpy *= width;
-
-    verts.push(p2x - perpx , p2y - perpy);
-    verts.push(r, g, b, alpha);
-
-    verts.push(p2x + perpx , p2y + perpy);
-    verts.push(r, g, b, alpha);
-
-    indices.push(indexStart);
-
-    for (i = 0; i < indexCount; i++)
-    {
-        indices.push(indexStart++);
-    }
-
-    indices.push(indexStart-1);
-};
-
-/**
- * Builds a complex polygon to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildComplexPoly = function (graphicsData, webGLData)
-{
-    //TODO - no need to copy this as it gets turned into a FLoat32Array anyways..
-    var points = graphicsData.points.slice();
-
-    if (points.length < 6)
-    {
-        return;
-    }
-
-    // get first and last point.. figure out the middle!
-    var indices = webGLData.indices;
-    webGLData.points = points;
-    webGLData.alpha = graphicsData.fillAlpha;
-    webGLData.color = utils.hex2rgb(graphicsData.fillColor);
-
-    // calclate the bounds..
-    var minX = Infinity;
-    var maxX = -Infinity;
-
-    var minY = Infinity;
-    var maxY = -Infinity;
-
-    var x,y;
-
-    // get size..
-    for (var i = 0; i < points.length; i+=2)
-    {
-        x = points[i];
-        y = points[i+1];
-
-        minX = x < minX ? x : minX;
-        maxX = x > maxX ? x : maxX;
-
-        minY = y < minY ? y : minY;
-        maxY = y > maxY ? y : maxY;
-    }
-
-    // add a quad to the end cos there is no point making another buffer!
-    points.push(minX, minY,
-                maxX, minY,
-                maxX, maxY,
-                minX, maxY);
-
-    // push a quad onto the end..
-
-    //TODO - this aint needed!
-    var length = points.length / 2;
-    for (i = 0; i < length; i++)
-    {
-        indices.push( i );
-    }
-
-};
-
-/**
- * Builds a polygon to draw
- *
- * @private
- * @param graphicsData {Graphics} The graphics object containing all the necessary properties
- * @param webGLData {object}
- */
-GraphicsRenderer.prototype.buildPoly = function (graphicsData, webGLData)
-{
-    var points = graphicsData.points;
-
-    if (points.length < 6)
-    {
-        return;
-    }
-
-    // get first and last point.. figure out the middle!
-    var verts = webGLData.points;
-    var indices = webGLData.indices;
-
-    var length = points.length / 2;
-
-    // sort color
-    var color = utils.hex2rgb(graphicsData.fillColor);
-    var alpha = graphicsData.fillAlpha;
-    var r = color[0] * alpha;
-    var g = color[1] * alpha;
-    var b = color[2] * alpha;
-
-    var triangles = utils.PolyK.Triangulate(points);
-
-    if (!triangles) {
-        return false;
-    }
-
-    var vertPos = verts.length / 6;
-
-    var i = 0;
-
-    for (i = 0; i < triangles.length; i+=3)
-    {
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i] + vertPos);
-        indices.push(triangles[i+1] + vertPos);
-        indices.push(triangles[i+2] +vertPos);
-        indices.push(triangles[i+2] + vertPos);
-    }
-
-    for (i = 0; i < length; i++)
-    {
-        verts.push(points[i * 2], points[i * 2 + 1],
-                   r, g, b, alpha);
-    }
-
-    return true;
-};
diff --git a/src/core/primitives/webgl/WebGLGraphicsData.js b/src/core/primitives/webgl/WebGLGraphicsData.js
deleted file mode 100644
index 41be102..0000000
--- a/src/core/primitives/webgl/WebGLGraphicsData.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @class
- * @private
- */
-function WebGLGraphicsData(gl) {
-    this.gl = gl;
-
-    //TODO does this need to be split before uploding??
-    this.color = [0,0,0]; // color split!
-    this.points = [];
-    this.indices = [];
-    this.buffer = gl.createBuffer();
-    this.indexBuffer = gl.createBuffer();
-    this.mode = 1;
-    this.alpha = 1;
-    this.dirty = true;
-}
-
-WebGLGraphicsData.prototype.constructor = WebGLGraphicsData;
-module.exports = WebGLGraphicsData;
-
-/**
- *
- */
-WebGLGraphicsData.prototype.reset = function () {
-    this.points = [];
-    this.indices = [];
-};
-
-/**
- *
- */
-WebGLGraphicsData.prototype.upload = function () {
-    var gl = this.gl;
-
-//    this.lastIndex = graphics.graphicsData.length;
-    this.glPoints = new Float32Array(this.points);
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
-    gl.bufferData(gl.ARRAY_BUFFER, this.glPoints, gl.STATIC_DRAW);
-
-    this.glIndicies = new Uint16Array(this.indices);
-
-    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
-    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.glIndicies, gl.STATIC_DRAW);
-
-    this.dirty = false;
-};