delete elements from canvas graphics in p5js

Question

I using canvas graphics to draw objects and need to undo the last drawn object, but could not find any option to delete last object from graphics, please suggest how to delete last object (i.e. creating undo function)

below is the code to in setup() -

    canvas=createCanvas(1000,1000);
    canvsGraphics = createGraphics(1000,1000);

Below is the object created in mouseDragged() function -

noStroke(); 
        fill(R,G,B);
        rectMode(CENTER);
        rect(mouseX,mouseY,20,20);

    //CREATES BUFFER
    canvsGraphics.noStroke();
    canvsGraphics.fill(R,G,B);
    canvsGraphics.rectMode(CENTER);
    canvsGraphics.rect(mouseX,mouseY,20,20);

Does this answer your question? [Why does this undo logic not work in p5.js?](https://stackoverflow.com/questions/71231952/why-does-this-undo-logic-not-work-in-p5-js) — ggorlen, Dec 05 '22 at 20:34

score 1 · Accepted Answer · answered Jun 04 '17 at 12:00

1

You can't just delete an object once it's drawn.

But you can clear out all of the objects using the background() function, and then redraw all of the objects that you still want to see.

You might consider creating a data structure that holds all of the objects. Then each frame, loop through that data structure and draw each object. To delete an object, simply remove it from the data structure.

answered Jun 04 '17 at 12:00

Kevin Workman

41,537
9
68
107

Thanks for your reply, I'm new in P5.JS so could you please give me any reference or example to add objects to data structure, – Adeeba Jun 04 '17 at 15:17
@Tanzeem Start with something simple like an array of `PVector` instances. – Kevin Workman Jun 04 '17 at 15:40

Aniruddha Paik · Answer 2 · 2018-11-18T21:38:25.347

0

So basically, if you make an empty array and every mouse press push a random name which describes your ellipse/any shape with your current mouse position X and Y, in your ever running draw function loop through the array, in the for loop evaluate what shape you want to draw at what position. look at the code for better understanding.

var canvas;
var posX;
var posY;
var pg;
var arr = [];

function setup() {
    let WndH = 620;
    canvas = createCanvas(WndH, WndH);
    canvas.position(200,50);
    canvas.mousePressed(func);
}

function func() {
    posX = mouseX;
    posY = mouseY;
    arr.push("e",posX,posY);
}

function draw() {
    background(200);
    fill(255);
    for (i = 0; i < arr.length; i++) {
        if(arr[i] == "e") {
            ellipse(arr[i + 1], arr[i + 2], 100, 100);
            i += 2;
        }
    }
}

so the first image is when i run the code but didn't yet take any action(mouse press)

this 2nd image is of me clicking around randomly on the canvas

edited Nov 18 '18 at 21:38

answered Nov 18 '18 at 21:32

Aniruddha Paik

1
1

How does this answer the question? Your answer is about registering the clicks, but the question is how to undo the last click... – JoSSte Nov 18 '18 at 21:56
@JoSSte , so when you register the clicks in an array, you can just remove the item from the array and the draw function as its looping all time would render the canvas without that item. isn't it like you removed the item you didn't want ? – Aniruddha Paik Nov 19 '18 at 17:26
I am just trying to provoke you into providing a higher quality answer in relation to the asked question. – JoSSte Nov 19 '18 at 19:49
@JoSSte , hey i posted another answer. tell me how is it. – Aniruddha Paik Nov 20 '18 at 09:42

delete elements from canvas graphics in p5js

2 Answers2