Skip to content

Add ShapePrimitive support for arcs and ellipses #8617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VANSH3104 wants to merge 6 commits into
base: dev-2.0
Choose a base branch
from
Open

Add ShapePrimitive support for arcs and ellipses #8617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
01aa360
Add ShapePrimitive support for arcs and ellipses
VANSH3104 Mar 6, 2026
bea47ea
Fix: Initialize shape with vertex properties in arc() to match ellips…
VANSH3104 Mar 18, 2026
e8cd4fd
Merge branch 'dev-2.0' into primitiveshapes
VANSH3104 Mar 18, 2026
20b191f
Merge branch 'dev-2.0' into primitiveshapes
VANSH3104 Mar 27, 2026
7d9298c
Fix: Initialize shape with vertex properties in arc() to match ellips…
VANSH3104 Mar 27, 2026
59400f6
fix: implement dual-path rendering for arcs and add path-safety moveTos
VANSH3104 Apr 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 19 additions & 90 deletions src/core/p5.Renderer2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -287,10 +287,10 @@ class Renderer2D extends Renderer {
this.clipPath.closePath();
} else {
if (this.states.fillColor) {
this.drawingContext.fill(visitor.path);
this.drawingContext.fill(visitor.fillPath || visitor.path);
}
if (this.states.strokeColor) {
this.drawingContext.stroke(visitor.path);
this.drawingContext.stroke(visitor.strokePath || visitor.path);
}
}
}
Expand Down Expand Up @@ -672,106 +672,35 @@ class Renderer2D extends Renderer {
* start <= stop < start + TWO_PI
*/
arc(x, y, w, h, start, stop, mode) {
const ctx = this.drawingContext;
const rx = w / 2.0;
const ry = h / 2.0;
const epsilon = 0.00001; // Smallest visible angle on displays up to 4K.
let arcToDraw = 0;
const curves = [];

const centerX = x + w / 2,
centerY = y + h / 2,
radiusX = w / 2,
radiusY = h / 2;
if (this._clipping) {
const tempPath = new Path2D();
tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
// Determines whether to add a line to the center, which should be done
// when the mode is PIE or default; as well as when the start and end
// angles do not form a full circle.
const createPieSlice = ! (
mode === constants.CHORD ||
mode === constants.OPEN ||
(stop - start) % constants.TWO_PI === 0
const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.arcPrimitive(
x,
y,
w,
h,
start,
stop,
mode
);

// Fill curves
if (this.states.fillColor) {
ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);
if (createPieSlice) ctx.lineTo(centerX, centerY);
ctx.closePath();
ctx.fill();
}

// Stroke curves
if (this.states.strokeColor) {
ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, start, stop);

if (mode === constants.PIE && createPieSlice) {
// In PIE mode, stroke is added to the center and back to path,
// unless the pie forms a complete ellipse (see: createPieSlice)
ctx.lineTo(centerX, centerY);
}

if (mode === constants.PIE || mode === constants.CHORD) {
// Stroke connects back to path begin for both PIE and CHORD
ctx.closePath();
}
ctx.stroke();
}
shape.endShape();
this.drawShape(shape);

return this;

}

ellipse(args) {
const ctx = this.drawingContext;
const doFill = !!this.states.fillColor,
doStroke = this.states.strokeColor;
const x = parseFloat(args[0]),
y = parseFloat(args[1]),
w = parseFloat(args[2]),
h = parseFloat(args[3]);
if (doFill && !doStroke) {
if (this._getFill() === styleEmpty) {
return this;
}
} else if (!doFill && doStroke) {
if (this._getStroke() === styleEmpty) {
return this;
}
}
const centerX = x + w / 2,
centerY = y + h / 2,
radiusX = w / 2,
radiusY = h / 2;
if (this._clipping) {
const tempPath = new Path2D();
tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
return this;
}
ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.closePath();
if (doFill) {
ctx.fill();
}
if (doStroke) {
ctx.stroke();
}

const shape = new p5.Shape({ position: new p5.Vector(0, 0) });
shape.beginShape();
shape.ellipsePrimitive(x,y,w,h);
shape.endShape();
this.drawShape(shape);
Copy link
Copy Markdown
Contributor

@davepagurek davepagurek Mar 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like drawShape already handles clipping so we can remove the clipping code above:

p5.js/src/core/p5.Renderer2D.js

Lines 269 to 279 in 01aa360

drawShape(shape) {
const visitor = new PrimitiveToPath2DConverter({
strokeWeight: this.states.strokeWeight
});
shape.accept(visitor);
if (this._clipping) {
const currentTransform = this.drawingContext.getTransform();
const clipBaseTransform = this._clipBaseTransform.inverse();
const relativeTransform = clipBaseTransform.multiply(currentTransform);
this.clipPath.addPath(visitor.path, relativeTransform);
this.clipPath.closePath();

return this;
}

Expand Down
Loading