diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index fde693f..b7b7a7e 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -82,6 +82,8 @@ const holes = data.holes; let outerArea; let innerArea; + let px; + let py; context.moveTo(points[0], points[1]); @@ -98,19 +100,30 @@ if (holes.length > 0) { outerArea = 0; - for (let j = 0; j < points.length; j += 2) + px = points[0]; + py = points[1]; + for (let j = 2; j + 2 < points.length; j += 2) { - outerArea += (points[j] * points[j + 3]) - (points[j + 1] * points[j + 2]); + outerArea += ((points[j] - px) * (points[j + 3] - py)) + - ((points[j + 2] - px) * (points[j + 1] - py)); } for (let k = 0; k < holes.length; k++) { - points = holes[k].points; + points = holes[k].shape.points; + + if (!points) + { + continue; + } innerArea = 0; - for (let j = 0; j < points.length; j += 2) + px = points[0]; + py = points[1]; + for (let j = 2; j + 2 < points.length; j += 2) { - innerArea += (points[j] * points[j + 3]) - (points[j + 1] * points[j + 2]); + innerArea += ((points[j] - px) * (points[j + 3] - py)) + - ((points[j + 2] - px) * (points[j + 1] - py)); } if (innerArea * outerArea < 0)