Fix clipping bug with ellipses

[jeanetteandrews]

Resolves #7158

Changes:

Added ctx.closePath(); to the ellipse() function in p5.Renderer2D.js. This fixed weird behavior when using circles, ellipses, and arcs with a clipping mask.

View this sketch and comment/uncomment the src tags in HTML to view changes:
https://editor.p5js.org/jeanetteandrews/sketches/CMjMhM0fb

Recreate bug:

function setup() {
    createCanvas(400, 400);
    background(0);
    beginClip();
    circle(100, 100, 100);
    ellipse(300, 100, 100, 100);
    circle(100, 300, 100);
    arc(300, 300, 100, 100 , 0, 2*PI);
    endClip();
    background(255);
}

This behavior can also be recreated with the Canvas API. It's resolved by adding ctx.closePath(); after each shape.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.ellipse(100, 100, 50, 50, 0, 0, 2 * Math.PI);  
// ctx.closePath(); 
ctx.ellipse(300, 100, 50, 50, 0, 0, 2 * Math.PI);  
// ctx.closePath(); 
ctx.ellipse(100, 300, 50, 50, 0, 0, 2 * Math.PI);  
// ctx.closePath(); 
ctx.arc(300, 300, 50, 50, 0, 2 * Math.PI);
// ctx.closePath(); 

ctx.fill(); 

Screenshots of the change:

Clipping mask behavior before, and after

PR Checklist

• npm run lint passes
• Unit tests are included / updated (npm test passes)

[welcome]

🎉 Thanks for opening this pull request! Please check out our contributing guidelines if you haven't already. And be sure to add yourself to the list of contributors on the readme page!

[davepagurek]

nice find, thanks for the fix!

[davepagurek]

@all-contributors please add @jeanetteandrews for code

[allcontributors]

@davepagurek

I've put up a pull request to add @jeanetteandrews! 🎉