I'm currently using p5.js in instance mode and I'm using the following block of code that's called by draw function of a p5 object. The draw function of the p5 object passes the p5 object as p to the below draw function.
//Snippet 1
this.draw = function(p){
...
p.push();
p.noStroke();
tempColour = someFunc(); //returns color object
p.fill(tempColour);
p.ellipse(p.mouseX, p.mouseY, diameter);
p.pop();
...
}
The above code works as expected without exceptions.
Now as soon as I use the erase() function (see below) the exception TypeError: p.erase is not a function. (In 'p.erase()', 'p.erase' is undefined) is thrown in the console.
//Snippet 2
this.draw = function(p){
...
p.push();
//newly inserted start
p.erase();
p.ellipse(p.mouseX, p.mouseY, diameter);
p.noErase();
//newly inserted end
p.noStroke();
tempColour = someFunc(); //returns color object
p.fill(tempColour);
p.ellipse(p.mouseX, p.mouseY, diameter);
p.pop();
...
}
I have tried to use the erase() function before push() is called but unfortunately the result is the same. I've also checked that I'm not accidentally reassigning/redeclaring erase on the p5 object. I'm struggling to understand how erase() is any different to fill() or stroke() or any other p5 function and how it might cause the exception.
My goal: The colours I pass to the ellipse function may contain an alpha value of less than 255. The code in Snippet 1 currently draws the ellipses on top of each other which ultimately results in a fully opaque ellipse (if mouseX and mouseY remain unchanged). What I'm trying to achieve with Snippet 2 is for the ellipse function to draw the exact colour I'm passing to it without the effect of the increased opacity.
Any help is much appreciated
