diff --git a/src/pixi/renderers/canvas/CanvasGraphics.js b/src/pixi/renderers/canvas/CanvasGraphics.js index 46cee2e..05e2f87 100644 --- a/src/pixi/renderers/canvas/CanvasGraphics.js +++ b/src/pixi/renderers/canvas/CanvasGraphics.js @@ -210,11 +210,14 @@ for (var i = 0; i < 1; i++) { var data = graphics.graphicsData[i]; - var points = data.shape.points; + var shape = data.shape; if(data.type === PIXI.Graphics.POLY) { context.beginPath(); + + var points = shape.points; + context.moveTo(points[0], points[1]); for (var j=1; j < points.length/2; j++) @@ -232,27 +235,26 @@ else if(data.type === PIXI.Graphics.RECT) { context.beginPath(); - context.rect(points[0], points[1], points[2], points[3]); + context.rect(shape.x, shape.y, shape.width, shape.height); context.closePath(); } else if(data.type === PIXI.Graphics.CIRC) { // TODO - need to be Undefined! context.beginPath(); - context.arc(points[0], points[1], points[2],0,2*Math.PI); + context.arc(shape.x, shape.y, shape.radius,0,2*Math.PI); context.closePath(); } else if(data.type === PIXI.Graphics.ELIP) { // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas - var ellipseData = data.points; - var w = ellipseData[2] * 2; - var h = ellipseData[3] * 2; + var w = shape.width * 2; + var h = shape.height * 2; - var x = ellipseData[0] - w/2; - var y = ellipseData[1] - h/2; + var x = shape.x - w/2; + var y = shape.y - h/2; context.beginPath(); @@ -273,6 +275,8 @@ } else if (data.type === PIXI.Graphics.RREC) { + + var points = shape.points; var rx = points[0]; var ry = points[1]; var width = points[2];