forked from processing-js/processing-js
-
Notifications
You must be signed in to change notification settings - Fork 10
Filled shapes using bezierVertex
F1LT3R edited this page Sep 12, 2010
·
4 revisions
There seems to be a bug when using filled shapes with bezierVertex.
beginShape(); fill(250,250,0); vertex(75,40); bezierVertex(75,37,70,25,50,25); bezierVertex(20,25,20,62.5,20,62.5); bezierVertex(20,80,40,102,75,120); bezierVertex(110,102,130,80,130,62.5); bezierVertex(130,62.5,130,25,100,25); bezierVertex(85,25,75,37,75,40); endShape( );The above should create a filled heart shape. In (Java) processing this is ok.
However in processing.js this will only draw part of the shape if the line vertex(75,40); is removed…
The equvalent in Canvas works fine:
ctx.beginPath(); ctx.moveTo(75,40); ctx.bezierCurveTo(75,37,70,25,50,25); ctx.bezierCurveTo(20,25,20,62.5,20,62.5); ctx.bezierCurveTo(20,80,40,102,75,120); ctx.bezierCurveTo(110,102,130,80,130,62.5); ctx.bezierCurveTo(130,62.5,130,25,100,25); ctx.bezierCurveTo(85,25,75,37,75,40); ctx.fill();from http://developer.mozilla.org/samples/canvas-tutorial/2_6_canvas_beziercurveto.html
The heart shape seems to render correctly when commenting out the following line from from the vertex() function:
} else if ( arguments.length == 6 ) { curContext.bezierCurveTo( x, y, x2, y2, x3, y3 ); //curShapeCount = -1; }#Update
This line no-longer exists in Processing.js. Everything seems to be working as expected.