Can I selectively delete something from canvas?

I have seen this question asked before, and it seems the answer is no. Still, perhaps I am wrong…

I am running a random walk inspired by Dan Shiffman’s first chapter of Nature of Code. It slowly creates a pretty pattern that I would like to keep. I would also like to highlight where the walker currently is, i.e which pixel is currently being painted, for example by a circle around it or an arrow pointing to it.

This would require erasing and redrawing the circle at each iteration. To make objects move, one normally erases the entire canvas and draws objects at their new locations, but I would lose the pretty pattern that has been created so far.

Is there a way to erase and redraw just my circle? Or can I add a second, transparent canvas that just contains the circle (like a layer in a photo processing program)? Or is there no other solution than redrawing everything, which would require remembering all the dots that have been drawn so far?


There are three methods you can try, either as you suggested separate canvases whi is doable, or use draw with no background, draw does not automatically clears the canvas, this has to be done by either filling the background at each cycle or using clear().
Or you could use an arraylist which could store all the positions and then instead of drawing one circle you would draw all circles in the arraylist
However is there any way to erase and redraw just my circle, well thats what clear or background would do.


They would also delete the entire pattern with the circle

  • So either write the pattern in a PGrapics and display the moving circle upon it - as you said.

  • or write pattern in an ArrayList<PVecor> listPV = new ArrayList(); , using background() throughout plus displaying the ArrayList plus the moving circle upon it - as you said, (remembering all the dots that have been drawn so far)

  • By the way: you can add interactivity for example upon c clear canvas, upon r change color to red.

And welcome to the forum, great to have you here!


Example with an ArrayList

ArrayList<PVector> points = new ArrayList();

void setup() { 
  size(800, 800); 

void draw() { 

  // show points in green 
  stroke(0, 255, 0);  // GREEN
  for (PVector pv1 : points) {
    point(pv1.x, pv1.y);

  // show red X 

  // read mouse
}// function draw()

// -------------------------------------------------------------------

void keyPressed() {
  // delete all 

void mousePressedThroughout() {
  // read mouse
  if (mousePressed) {
    points.add(new PVector(mouseX, mouseY));

void showMouse() {
  stroke(255, 0, 0); // RED 

  line( mouseX-3, mouseY-3, 
    mouseX-23, mouseY-23);
  line( mouseX+3, mouseY+3, 
    mouseX+23, mouseY+23);
  line( mouseX+3, mouseY-3, 
    mouseX+23, mouseY-23);
  line( mouseX-3, mouseY+3, 
    mouseX-23, mouseY+23);
1 Like

And I feel very welcome, thanks paulgoux and Chrisir!

So I will learn about PGraphics and canvases. Great input, and fast.

Stay healthy.

1 Like

Why PGraphics?

How do you like my arraylist example?