ellipse with ellipseMode CORNERS throws when second set of parameters is lesser than first set

[ff6347]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

1.11.0

Web browser and version

not related to browsers

Operating system

not realted to OS

Steps to reproduce this

I encountered a problem playing with the ellipseMode CORNERS.

function setup() {
	createCanvas(100, 100);
	background("black");
	ellipseMode(CORNERS);
	ellipse(10, 10, 0, 0);
	// rectMode(CORNERS);
	// rect(10, 10, 0, 0);
}

function draw() {}

Here is a codepen with that error: https://codepen.io/ff6347/pen/qBePYMp/faf03bd2397b9e68d68e67556e5f8a6d

Uncaught (in promise) DOMException: CanvasRenderingContext2D.ellipse: Negative radius
ellipse https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:70181  
_renderEllipse https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:73096  
ellipse https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:73022  
setup pen.js:58  
_setup https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:66259  
_start https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:66188  
p5 https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:66528  
_globalInit https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:65299  
promise callback*[303]< https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:65319  
o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:40  
o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:42  
[289]< https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:54340  
o https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:40  
r https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:47  
<anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:51  
<anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:18  
<anonymous> https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js:20  
[p5.js:70181](https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.0/p5.js)

This is error also occurs when drawing directly to the canvas without p5js when passing negative values to ctx.ellipse.

<canvas></canvas>

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.ellipse(10, 10, -10, -10, 0, 0, 2 * Math.PI);
ctx.stroke();

I poked a little around in the source and I think a found a solution. It is not tested how it affects drawing of arc and rect but it seems to fix the ellipseMode(CORNERS). A working codepen can be found here.

The gist is to use Math.abs in modeAdjust for the corners mode

p5.js/src/core/helpers.js

Line 21 in 03b9517

} else if (mode === constants.CORNERS) {

// CORNERS mode uses two opposite corners, in any configuration.
// Make sure to get the top left corner by using the minimum of the x and y coordniates.
// https://github.com/processing/p5.js/blob/03b9517750b5498f4d0304d56a4e464b388bcca2/src/core/helpers.js#L21
const bbox = {
	x: Math.min(a, c),
	y: Math.min(b, d),
	w: Math.abs(c - a), // using Math.abs seems to fix this
	h: Math.abs(d - b) // using Math.abs seems to fix this
};

[davepagurek]

I think this may have been fixed this week thanks to #7290! The modeAdjust function on the main branch now uses Math.abs in more places. Does that PR look like it does the same fix you're suggesting?

[ff6347]

Hi @davepagurek yes that looks like my approach but applied to all methods and with proper tests. So way ahead of me 👏🏾 I am closing this issue - thanks.