Skip to content

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.

Clone this wiki locally