Reference endShape()

endShape()

Begins adding vertices to a custom shape.

The beginShape() and endShape() functions allow for creating custom shapes in 2D or 3D. beginShape() begins adding vertices to a custom shape and endShape() stops adding them.

The first parameter, mode, is optional. By default, the first and last vertices of a shape aren't connected. If the constant CLOSE is passed, as in endShape(CLOSE), then the first and last vertices will be connected.

The second parameter, count, is also optional. In WebGL mode, it’s more efficient to draw many copies of the same shape using a technique called instancing. The count parameter tells WebGL mode how many copies to draw. For example, calling endShape(CLOSE, 400) after drawing a custom shape will make it efficient to draw 400 copies. This feature requires writing a custom shader.

After calling beginShape(), shapes can be built by calling vertex(), bezierVertex(), quadraticVertex(), and/or curveVertex(). Calling endShape() will stop adding vertices to the shape. Each shape will be outlined with the current stroke color and filled with the current fill color.

Transformations such as translate(), rotate(), and scale() don't work between beginShape() and endShape(). It's also not possible to use other shapes, such as ellipse() or rect(), between beginShape() and endShape().

Examples

Syntax

endShape([mode], [count])

Parameters

mode

use CLOSE to close the shape

count

number of times you want to draw/instance the shape (for WebGL mode).

Notice any errors or typos? Please let us know. Please feel free to edit src/core/shape/vertex.js and open a pull request!

Related References