Skip to content
32 changes: 22 additions & 10 deletions src/core/p5.Renderer2D.js
Original file line number Diff line number Diff line change
Expand Up @@ -305,6 +305,7 @@ class Renderer2D extends Renderer {
// Start a new path. Everything from here on out should become part of this
// one path so that we can clip to the whole thing.
this.clipPath = new Path2D();
this.initialClipTransform = this.drawingContext.getTransform().inverse();

if (this._clipInvert) {
// Slight hack: draw a big rectangle over everything with reverse winding
Expand Down Expand Up @@ -705,7 +706,7 @@ class Renderer2D extends Renderer {
}

ellipse(args) {
const ctx = this.clipPath || this.drawingContext;
const ctx = this.drawingContext;
const doFill = !!this.states.fillColor,
doStroke = this.states.strokeColor;
const x = parseFloat(args[0]),
Expand All @@ -725,17 +726,28 @@ class Renderer2D extends Renderer {
centerY = y + h / 2,
radiusX = w / 2,
radiusY = h / 2;
if (!this._clipping) ctx.beginPath();

ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.closePath();
if (this._clipping) {
const tempPath = new Path2D();
tempPath.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);

if (!this._clipping && doFill) {
ctx.fill();
}
if (!this._clipping && doStroke) {
ctx.stroke();
const currentTransform = this.drawingContext.getTransform();
const initialClip = this.initialClipTransform;
const relativeTransform = initialClip.multiply(currentTransform);
this.clipPath.addPath(tempPath, relativeTransform);
} else {
// Normal drawing (existing code)
ctx.beginPath();
ctx.ellipse(centerX, centerY, radiusX, radiusY, 0, 0, 2 * Math.PI);
ctx.closePath();
if (doFill) {
ctx.fill();
}
if (doStroke) {
ctx.stroke();
}
}

return this;
}

line(x1, y1, x2, y2) {
Expand Down
Loading