erase() throws Uncaught TypeError on Graphic

[harplife]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

Details about the bug:

• p5.js version: v1.2.0 Dec 19, 2020
• Web browser and version: 85.0
• Operating System: Windows 10
• Steps to reproduce this:

Hello, p5 newbie here. I'm trying to draw on top of an image and erase only what I've drawn and not the image. The code I made works fine, but there seems to be weird interaction between erase() and Graphic.

In order to test that erase() function is working normally on canvas, the code I tried is this:

var eraseMode = false;


function setup(){
  createCanvas(300, 300);
}

function draw() {
  if(keyIsPressed && key == 'e'){
    eraseMode = true;
  } else {
    eraseMode = false;
  };
}

function mousePressed(){
  if (eraseMode) {
    erase();
    rect(mouseX, mouseY, 20, 20);
  } else {
    noErase();
    fill(255, 0, 0);
    ellipse(mouseX, mouseY, 20, 20);
  }
}

Basically, when I just click on canvas, a little red ellipse is drawn. When I hold e and click, I erase stuff on canvas with a rect shape. It works fine, even if erase() is the first thing that is called.

It's a different story when I bring in a Graphic. The code is below;

var img;
var pg;
var eraseMode = false;

function preload() {
  img = loadImage("./imgs/some_image.png");
}

function setup(){
  createCanvas(300, 300);
  pg = createGraphics(300, 300);
}

function mousePressed(){
  if (eraseMode) {
    pg.erase();
    pg.rect(mouseX, mouseY, 20, 20);
  } else {
    pg.noErase();
    pg.fill(255, 0, 0);
    pg.ellipse(mouseX, mouseY, 20, 20);
  }
}

function draw() {
  console.log('working')
  image(img, 0, 0, 300, 300);
  image(pg, 0, 0);
  if (keyIsPressed && key == 'e') {
    eraseMode = true;
  } else {
    eraseMode = false;
  };
}

At first it seems fine - you draw something on Graphic, and then you erase it. But then when erasing is the first thing you do before you draw anything, it throws Uncaught TypeError: this._accessibleOutputs is undefined.

Now, when you try it with the code I provided, even though it throws the error, it will continue to work as if there's no problem. However, before I created the eraseMode variable, I had pg.erase() inside the if (keyIsPressed) statement, and the error stopped everything from working. The draw() function would simply stop working.

To summarize, erase() is working differently on Graphic than it does on Canvas. I don't know if this is an expected behaviour, as I haven't been able to find any documentation saying so.

Can someone confirm;

1. whether this is an expected/unexpected behaviour,
2. whether the usage of erase() is wrong in the code above (if it is, can you guide me to the documentation that clearly describes how erase() works? The reference documentation is not very clear on this matter),
3. whether this behavior occurs on a specific environment (I like to think I'm using run-of-the-mill setup),
4. whether there are distinct differences between Canvas and Graphic (and is there any documentation saying so)?

I realize I may be asking a lot of things here, but I want to learn more p5.js stuff and I'd appreciate it greatly if someone could clarify what's happening here.

Thank you very much for your time!!

[stalgiag]

Thanks for the thorough issue! @lm-n any thoughts on this problem? Likely related to #4983

[stalgiag]

Needs testing but likely fixed by #5003

[lmccart]

I'm not able to reproduce this, with the current version (1.3.0) or the previous versions (1.2.0, 1.1.0). Here's my test sketch:
https://editor.p5js.org/lmccart/sketches/4RoeE2Yu-

Does this throw the error for you @harplife?

[harplife]

Hello, @lmccart ! Sorry for the late reply.

Have you tested it on a local environment, instead of on the online web editor?
I'm still able to reproduce the same bug on the local environment,
but on the online web editor, it seems to produce a different, yet odd, result.

On the online web editor, if my first action (after clicking the start button) is to erase (holding e and click),
it will draw a red ellipse instead of doing nothing (since there's nothing to erase).
It won't throw any error, as you have said.. but I don't think this is an intended result.
This was tested on both Chrome and Firefox.

[stalgiag]

Hi @harplife I made a copy of @lmccart's sketch here. It is similar but the mouse drawing is every frame just to help make it a little more clear what is happening.

When you are clicking without holding e, you are drawing red circles to the graphics object. When you are clicking while holding e, you are erasing with a rectangle shape from the graphics. The example works as expected with no errors for me.

As for why you still get the _accessibleOutputs error locally, that is likely due to the version you are using locally.

[harplife]

@stalgiag oh no, I think there's been a little misunderstanding.

p5.js v1.2.0 produces the Uncaught TypeError.
p5.js v1.3.0 fixed the bug, now it works as intended without any error.
(Thank you, btw! and to everyone who worked on the #4983 and #5003)

@lmccart mentions that this error is not reproducible in both v1.2.0 and v1.3.0,
to which I asked whether @lmccart tried to reproduce the error in the local environment;
because on the online web editor, it seems to produce an entirely different "bug".

In order to prevent confusion, I've screen captured the event.
Below is the capture of "Online web editor, holding E, clicking multiple times":
https://1drv.ms/v/s!Ah7npVGD4NFHjCZaFTP-u4NB9gmU?e=wUr6gS
In the video, you can see two red ellipses being drawn, despite holding E on keyboard.
Btw, this is the same for both p5.js v1.2.0 and v.1.3.0.

Just in case, below is a capture of "Local server, p5.js v1.2.0, Erase on first click":
https://1drv.ms/v/s!Ah7npVGD4NFHjCfSjED8jWPDNUP2?e=ZZ4Jt6
This produces the Uncaught TypeError bug that is now fixed on v1.3.0.

I'd like to close the issue since the error is fixed,
but before I do, I'd like to

1. confirm that this error is reproducible (on p5.js v1.2.0)
2. confirm that a different error occurs on the online web editor

[lmccart]

ok, thank you for the clarification. sounds like it's fixed then in 1.3.0. may I close this?

[harplife]

Yeah sure.